Липкий нижний колонтитул после позиции абсолютная обертка

Question

У меня есть обертка, которая должна быть горизонтально центрирована. Я не знаю другого способа сделать это, кроме использования абсолютной позиции.

#wrapper { 
    width: 721px; 
    height: 720px; 
    position: absolute; 
    margin: auto; 
    top: 136px; 
    left: 0; 
    right: 0; 
    background: white; 
    clear: both; 
} 

Он содержит три других разделительных элемента, которые плавают. Если я изменил положение обертки на относительную, те divs испортились.

____________________________________________ 
header 
____________________________________________ 

     __wrapper____________ 
     |   |   | 
     |   |   | 
     | div1 | div2  | 
     |   |   | 
     |   |   | 
     |   |   | 
     |_________|__________| 
     |  div3   | 
     |____________________| 

__________________________________________ 
footer 
__________________________________________ 

Но я хочу иметь липкий нижний колонтитул, который будет всегда у основания сайта. Независимо от того, сколько у меня контента, оно будет оставаться внизу. Я мог бы добиться этого, если бы моя обложка не была позиционной: абсолютная, но поскольку она не может нажать нижнюю часть нижнего колонтитула, я хочу знать, есть ли другой способ сделать это?

.footer { 
    border-top: 1px solid #dcdcdc; 
    max-width: 100vw; 
    font-weight: bold; 
    text-align: center; 
    background: #f0f0f0; 
    width: 100%; 
    height: 80px; 
} 

Как вы можете видеть в JS-FIDDLE футер скрывается за головой.

Answer 1

Вы используете бутстрап? с начальной загрузкой, ваш макет будет так же просто, как этот код:

<div class="navbar navbar-fixed-top"> 
    you header 
</div> 

<div class="row"> 
<div class="col-md-3 col-md-offset-3"> 
    your div1 
</div> 
<div class="col-md-3 col-md-offset-6"> 
    your div2 
</div> 
</div> 
<div class="row"> 
<div class="col-md-6 col-md-offset-3"> 
    your div3 
</div> 
</div> 


<div class="navbar navbar-fixed-bottom"> 
    your footer 
</div> 

и раздайте CSS:

html, body { 
    padding-bottom: 55px; 
    padding-top: 55px; 
} 

Как это должен соответствовать Navbar хорошо в верхних и нижних сторонах.

EDIT: Поскольку вы не используете рамки, то:

Добавить это CSS-сноска.

position: fixed; 
bottom: 0; 

Это покажет вам нижний колонтитул, потому что он скрыт за заголовком.

Answer 2

Вы должны попробовать clear свойство CSS (в моем случае я использовал div класс под названием clearfix), поставить это после того, как .box2:

.clearfix:after { 
    content: ''; 
    display: table; 
    clear: both; 
} 
.clearfix:before { 
    content: ''; 
    display: table; 
} 

Посмотрите ниже фрагмент кода (использование полноэкранного режима режим):

.header { 
 
    min-width: 720px; 
 
\t top: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t max-width: 100vw; 
 
\t line-height: 80px; 
 
\t font-weight: bold; 
 
\t text-align: center; 
 
\t margin: 0 auto; 
 
\t border-bottom: 1px solid #dcdcdc; 
 
\t background: #f0f0f0; 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 80px; 
 
    z-index: 1; 
 
} 
 
#wrapper { 
 
    border: 1px solid blue; 
 
    width: 721px; 
 
\t background: white; 
 
    margin: 120px auto 40px; 
 
} 
 
.box1 { 
 
    clear:both; 
 
    display: inline-block; 
 
    float:left; 
 
    height:300px; 
 
    width:360px; 
 
    border: 1px solid black; 
 
} 
 
.box2 { 
 
    clear:both; 
 
    display: inline-block; 
 
    float:right; 
 
    height:300px; 
 
    width:350px; 
 
    border: 1px solid black; 
 
} 
 
.footer { 
 
    border-top: 1px solid #dcdcdc; 
 
    max-width: 100vw; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    background: #f0f0f0; 
 
    width: 100%; 
 
    height: 80px; 
 
} 
 
.clearfix:after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
} 
 
.clearfix:before { 
 
    content: ''; 
 
    display: table; 
 
}

<div class=header> 
 
Asdf 
 
</div> 
 
<div id="wrapper"> 
 
    <div class="box1"> asdf</div> 
 
    <div class="box2"> asdf</div> 
 
    <div class="clearfix"></div> 
 
</div> 
 
<footer class="footer"> 
 
ASDAFASFAFASFSAF 
 
</footer>

Надеюсь, это поможет!

Answer 3

Это грубый бросок, но в современном веб-разработке мы получаем радости от замечательной flexbox. Вот краткий пример

<div class="wrapper"> 
<div class="flex-wrapper"> 
    <div class="flex-container"> 
    <div class="div1">Box1</div> 
    <div class="div2">Box2</div> 
    </div> 
    <div class="div3">Box3</div> 
</div> 
</div> 

.wrapper { 
    display:flex; 
    justify-content: center; 
    align-content: center; 
    height: 500px; 
} 
.flex-wrapper { 
    display:flex; 
    flex-direction: column; 
    align-self: center 

} 
.flex-container{ 
    display: flex; 
    position: relative; 
} 
.div1,.div2 { 
    height:100px; 
    width:100px; 
} 
.div1 { 
    background-color:blue; 
} 
.div2 { 
    background-color:red; 
} 
.div3 { 
    background-color:green; 
    width:200px; 
    height:100px; 
} 

Просто используйте этот тип макета, но сделать еще один контейнер вокруг «обертки», так что сноска разве пострадавших.

https://jsfiddle.net/wxokadrx/

Кроме того, в случае, если вы не знакомы с Flexbox: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Answer 4

Если и не хотите использовать гибкий, это может помочь

Во-первых, нет необходимости использовать положение абсолютное горизонтальное выравнивание div.

<div id="outer"> 
<div id="inner"> 
</div> 
</div> 

<style> 
#outer { 
    background-color: green; 
} 
#inner { 
    left: 0; 
    right: 0; 
    margin: auto; 
    height: 300px; 
    width: 400px; 
    background-color: red; 
} 
</style> 

Вот скрипка https://jsfiddle.net/x2j325n4/

Плавающая внутренний Див падает высоту обертки 0px. Поэтому замена поплавков на дисплей: встроенные блоки могут помочь.

<style> 
#header { 
    width: 100%; 
    height: 50px; 
    background-color: pink; 
} 
#wrapper { 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: 60%; 
} 
#div1 { 
    width: 30%; 
    height: 400px; 
    display: inline-block; 
    background-color: grey; 
} 
#div2 { 
    display: inline-block; 
    width: 60%; 
    height: 400px; 
    background-color: red; 
} 
#div3 { 
    width: 100%; 
    height: 400px; 
    display: inline-block; 
    background-color: blue; 
} 
#footer { 
    width: 100%; 
    height: 50px; 
    background-color: green; 
} 
</style> 
<div id="header"> 
    Hey i'm header 
</div> 

<div id="wrapper"> 
<div id="div1"> 
    first div 
</div> 
<div id="div2"> 
    second div 
</div> 
<div id="div3"> 
    third div 
</div> 
</div> 


<div id="footer"> 
    Hey i'm footer 
</div> 

Fiddle: https://jsfiddle.net/rjhwxdL5/

или если и хотят колонтитул, чтобы остаться в нижней части окна просмотра, используйте position: fixed; bottom: 0; в футере