1. дома
  2. Вопрос и ответ
  3. Стоящий нижний колонтитул CSS внизу

Стоящий нижний колонтитул CSS внизу

2016-11-17 10 views
0

Не могу показаться, что этот нижний колонтитул встал на дно, несмотря на многочисленные методы, которые я искал.Стоящий нижний колонтитул CSS внизу

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

Спасибо!

html { 
 
    overflow-y: scroll; 
 
} 
 
body { 
 
    margin: 0; 
 
    background-color: #ffffff; 
 
    font-family: 'Ubuntu', sans-serif; 
 
} 
 
div { 
 
    display: block; 
 
} 
 
.header-wrapper { 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
} 
 
.container { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    width: 940px; 
 
} 
 
.container:before, 
 
.container:after { 
 
    display: table; 
 
    line-height: 0; 
 
    content: ""; 
 
} 
 
#header { 
 
    height: 60px; 
 
    padding: 20px 0 25px 0; 
 
} 
 
#header .logo { 
 
    float: left; 
 
} 
 
#header .logo a { 
 
    display: block; 
 
    width: 270px; 
 
    height: 60px; 
 
    text-indent: -999em; 
 
    line-height: 60px; 
 
    background: url(/test/_assets/img/header-logo.png) no-repeat 0px 1px; 
 
    background-size: 270px 60px; 
 
} 
 
#header .american-flag { 
 
    display: block; 
 
    float: right; 
 
} 
 
#header .american-flag img { 
 
    max-height: 60px; 
 
} 
 
#content { 
 
    height: 100%; 
 
    padding: 20px 0 0 0; 
 
} 
 
body a { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 
body a:hover { 
 
    text-decoration: underline; 
 
} 
 
.footer-wrapper { 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
} 
 
#footer { 
 
    line-height: 60px; 
 
    height: 60px; 
 
}
<html> 
 

 
<body> 
 
    <div class="header-wrapper"> 
 
    <div class="container" id="header"> 
 
     <div class="logo"> 
 
     <a href="/">URL</a> 
 
     </div> 
 
     <div class="american-flag"> 
 
     FLAG 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container" id="content"> 
 
    Site content 
 
    </div> 
 
    <div class="footer-wrapper"> 
 
    <div class="container" id="footer"> 
 
     footer 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2016-11-17 Tom

+1

Вы хотите, чтобы нижний колонтитул был внизу, у которого будет тень коробки, а содержание сосредоточено? – GiuServ

ответ

1

Я применил Ryan Fait's sticky footer к вашей разметке.

html, 
 
body { 
 
    height: 100%; 
 
} 
 
html { 
 
    overflow-y: scroll; 
 
} 
 
body { 
 
    margin: 0; 
 
    background-color: #ffffff; 
 
    font-family: 'Ubuntu', sans-serif; 
 
} 
 
div { 
 
    display: block; 
 
} 
 
.wrap { 
 
    min-height: 100%; 
 
    margin-bottom: -60px; 
 
} 
 
.header-wrapper { 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
} 
 
.container { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    width: 940px; 
 
} 
 
.container:before, 
 
.container:after { 
 
    display: table; 
 
    line-height: 0; 
 
    content: ""; 
 
} 
 
#header { 
 
    height: 60px; 
 
    padding: 20px 0 25px 0; 
 
} 
 
#header .logo { 
 
    float: left; 
 
} 
 
#header .logo a { 
 
    display: block; 
 
    width: 270px; 
 
    height: 60px; 
 
    text-indent: -999em; 
 
    line-height: 60px; 
 
    background: url(/test/_assets/img/header-logo.png) no-repeat 0px 1px; 
 
    background-size: 270px 60px; 
 
} 
 
#header .american-flag { 
 
    display: block; 
 
    float: right; 
 
} 
 
#header .american-flag img { 
 
    max-height: 60px; 
 
} 
 
#content { 
 
    height: 100%; 
 
    padding: 20px 0 0 0; 
 
} 
 
body a { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 
body a:hover { 
 
    text-decoration: underline; 
 
} 
 
.footer-wrapper { 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
} 
 
#footer { 
 
    line-height: 60px; 
 
    height: 60px; 
 
}
<div class="wrap"> 
 
    <div class="header-wrapper"> 
 
    <div class="container" id="header"> 
 
     <div class="logo"> 
 
     <a href="/">URL</a> 
 
     </div> 
 
     <div class="american-flag"> 
 
     FLAG 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container" id="content"> 
 
    Site content 
 
    </div> 
 
</div> 
 
<div class="footer-wrapper"> 
 
    <div class="container" id="footer"> 
 
    footer 
 
    </div> 
 
</div>

источник

2016-11-17 15:36:41 hungerstar

+0

Работает отлично, отличная работа. – Tom

1

проверка следующий CSS

.footer-wrapper 
{ 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
    box-shadow: 0 0 10px rgba(0,0,0,0.1); 
    bottom: 0px; /* add this line */ 
    position:fixed; /* add this line */ 
}

надеюсь, что это помогает.

источник

2016-11-17 15:36:13 reza

+0

Это прилипает к основанию, но оно оставляет нижний колонтитул вне центра. – Tom

+1

. Есть пара исправлений, которые необходимо применить к этому ответу. Сначала установите 'width: 100%;' to '.footer-wrapper'. Затем вам нужно будет установить нижнее поле на '# content', равное высоте нижнего колонтитула, чтобы содержимое не было скрыто перекрывающимся элементом нижнего колонтитула из-за фиксированного позиционирования. – hungerstar

1

Вы можете использовать calc() функцию CSS с min-height свойством.

Как:

#content { 
    min-height: calc(100vh - 200px); // Viewport Height (100%) - Remaining space of the content & header (135px) 
}

Посмотри на ниже фрагменте коды:

html 
 
{ 
 
/* \t overflow-y: scroll; */ 
 
} 
 
body \t 
 
{ 
 
\t margin:0; 
 
\t background-color:#ffffff; 
 
\t font-family:'Ubuntu',sans-serif; 
 
} 
 
div 
 
{ 
 
\t display:block; 
 
} 
 
.header-wrapper 
 
{ 
 
\t -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
    box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
} 
 
.container 
 
{ 
 
\t margin-right:auto; 
 
\t margin-left:auto; 
 
\t width:940px; 
 
} 
 
.container:before, .container:after 
 
{ 
 
    display: table; 
 
    line-height: 0; 
 
    content: ""; 
 
} 
 
#header 
 
{ 
 
\t height:60px; 
 
\t padding:20px 0 25px 0; 
 
} 
 
#header .logo 
 
{ 
 
\t float:left; 
 
} 
 
#header .logo a 
 
{ 
 
    display: block; 
 
    width: 270px; 
 
    height: 60px; 
 
    text-indent: -999em; 
 
    line-height: 60px; 
 
    background: url('/test/_assets/img/header-logo.png') no-repeat 0px 1px; 
 
\t background-size: 270px 60px; 
 
} 
 
#header .american-flag 
 
{ 
 
\t display:block; 
 
\t float:right; 
 
} 
 
#header .american-flag img 
 
{ 
 
\t max-height:60px; 
 
} 
 
#content 
 
{ 
 
\t height:100%; 
 
\t padding:20px 0 0 0; 
 
} 
 
body a 
 
{ 
 
\t color:red; 
 
\t text-decoration:none; 
 
} 
 
body a:hover 
 
{ 
 
\t text-decoration: underline; 
 
} 
 
.footer-wrapper 
 
{ 
 
\t -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
    box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
} 
 
#footer 
 
{ 
 
\t line-height:60px; 
 
\t height:60px; 
 
} 
 

 
#content { 
 
    min-height: calc(100vh - 185px); 
 
}
<div class="header-wrapper"> 
 
    <div class="container" id="header"> 
 
     <div class="logo"> 
 
      <a href="/">URL</a> 
 
     </div> 
 
     <div class="american-flag"> 
 
     \t FLAG 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="container" id="content"> 
 
Site content 
 
</div> 
 
<div class="footer-wrapper"> 
 
\t <div class="container" id="footer"> 
 
\t footer 
 
\t </div> 
 
</div>

Надеется, что это помогает!

источник

2016-11-17 15:37:30

+1

В нижней части нижней части нижнего колонтитула есть зазор. – hungerstar

+1

@hungerstar Посмотрите мой обновленный код! –

1

Вам нужно добавить следующее в .footer-wrapper класс:

.footer-wrapper { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    width: 100%; 
}

Вот скрипку его в действии, так как это не выглядит так хорошо в фрагменте кода: https://jsfiddle.net/jm2rveqc/

html { 
 
    overflow-y: scroll; 
 
} 
 
body { 
 
    margin: 0; 
 
    background-color: #ffffff; 
 
    font-family: 'Ubuntu', sans-serif; 
 
} 
 
div { 
 
    display: block; 
 
} 
 
.header-wrapper { 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
} 
 
.container { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    width: 940px; 
 
} 
 
.container:before, 
 
.container:after { 
 
    display: table; 
 
    line-height: 0; 
 
    content: ""; 
 
} 
 
#header { 
 
    height: 60px; 
 
    padding: 20px 0 25px 0; 
 
} 
 
#header .logo { 
 
    float: left; 
 
} 
 
#header .logo a { 
 
    display: block; 
 
    width: 270px; 
 
    height: 60px; 
 
    text-indent: -999em; 
 
    line-height: 60px; 
 
    background: url(/test/_assets/img/header-logo.png) no-repeat 0px 1px; 
 
    background-size: 270px 60px; 
 
} 
 
#header .american-flag { 
 
    display: block; 
 
    float: right; 
 
} 
 
#header .american-flag img { 
 
    max-height: 60px; 
 
} 
 
#content { 
 
    height: 100%; 
 
    padding: 20px 0 0 0; 
 
} 
 
body a { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 
body a:hover { 
 
    text-decoration: underline; 
 
} 
 
.footer-wrapper { 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 
#footer { 
 
    line-height: 60px; 
 
    height: 60px; 
 
}
<html> 
 

 
<body> 
 
    <div class="header-wrapper"> 
 
    <div class="container" id="header"> 
 
     <div class="logo"> 
 
     <a href="/">URL</a> 
 
     </div> 
 
     <div class="american-flag"> 
 
     FLAG 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container" id="content"> 
 
    Site content 
 
    </div> 
 
    <div class="footer-wrapper"> 
 
    <div class="container" id="footer"> 
 
     footer 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2016-11-17 15:40:40

+0

К элементу содержимого необходимо применить маркер, равный высоте нижнего колонтитула, чтобы содержимое не было скрыто перекрывающимся элементом нижнего колонтитула. – hungerstar

-1

не подходит?

#footer { 
     line-height: 60px; 
     height: 60px; 
     position:absolute; 
     bottom:0; 
    }

источник

2016-11-17 15:42:43 Matoeil

+0

Вы пробовали это? Действительно ли это работает? – hungerstar

+0

хорошо да. почему голосуете? http://codepen.io/matoeil/pen/Woopdq – Matoeil

+0

Не работает. Возможно, пример с некоторым контентом [где пользователь должен прокручивать] (http://codepen.io/anon/pen/dOOWxb). – hungerstar

0

Я бы просто использовать Flexbox для этих случаев.

Просто измените

html { 
    overflow-y: scroll; 
}

в

html, body { 
    height: 100%; 
}

добавить display: flex и flex-direction: column к вашему телу

body { 
    margin: 0; 
    background-color: #ffffff; 
    font-family: 'Ubuntu', sans-serif; 
    display: flex; 
    flex-direction: column; 
}

и, наконец, добавить margin-top: auto в футере обертке

.footer-wrapper { 
    margin-top: auto; 
}

источник

2016-11-17 15:52:19 SvenL

Смежные вопросы

 Смежные вопросы