CSS - Как сделать нижний колонтитул в нижней части страницы?

макет здесь является шаблоном для моего сайта http://jsfiddle.net/QvFV8/12/, поскольку вы можете видеть, что содержимое переполняет нижний колонтитул.CSS - Как сделать нижний колонтитул в нижней части страницы?

Он отлично работает, когда есть только небольшое количество контента, которое я хочу. Я пробовал очистить оба в секции 1-го нижнего колонтитула, но это не влияет

Как можно растянуть страницу так, чтобы нижний колонтитул оставался внизу, независимо от количества контента (на некоторых страницах будет больше или больше менее содержание затем другие)

<body> 
<div class="container"> 
    <div class="header"> 
     <div class="headerleft"> 
      <div class="headerleftcon">leftcon</div> 
      </div> 
     <div class="headerright"> 
      <div class="headerrightcon">rightcon</div> 
      </div> 
     <div class="header-content">Header 
     </div> 
    </div> 
    <div class="body"> 
     <div class="left-sidebar"> 
      <div class="left-content">left sidebar</div> 
     </div> 
     <div class="right-sidebar"> 
      <div class="right-content">right sidebar</div> 
     </div> 
     <div class="content">Content 1 
     <div class="centerbox"> 
      <div class="centerboxcontent">Center box <br> </div> 
     </div>Content 2 <br> Content 2 <br>Content 2 <br>Content 2 <br>Content 2 
     bla bla bla 
     </div> 
    </div> 
    <div class="footer"> 
     <div class="footerleft"> 
      <div class="footerleftcon">botleftcon</div> 
      </div> 
     <div class="footerright"> 
      <div class="footerrightcon">botrightcon</div> 
      </div> 
     <div class="footer-content">Footer</div> 
    </div> 
</div> 
</body>

CSS-код выглядит следующим образом

html, body { 
height: 100%; 
width: 100%; 
padding: 0px; 
margin: 0px;} 
.header, .footer{ 
height: 80px; 
background-color: #EFEFEF; 
position: relative;} 
.header-content{ 
padding: 20px; 
text-align: center;} 
.headerleft{ 
height: 100%; 
background-color: red; 
width: 50px; 
float: left;} 
.headerleftcon{ 
padding: 0px 0px 0px 0px;} 
.headerright{ 
height: 100%; 
background-color: red; 
width: 50px; 
float: right;} 
.headerrightcon{ 
padding: 0px 0px 0px 0px;} 
.footer-content{ 
padding: 20px; 
text-align: center;} 
.container{ 
height: 100%;} 
.body{ 
height: 100%; 
margin-top: -80px; 
margin-bottom: -80px; 
background-color: #C7DFFA;} 
.content{ 
padding: 80px 0px 0px 0px;} 
.left-sidebar{ 
height: 100%; 
background-color: gray; 
width: 50px; 
margin-top: -80px; 
margin-bottom: -80px; 
float: left; 
clear: both;} 
.right-sidebar{ 
height: 100%; 
background-color: gray; 
width: 50px; 
margin-top: -80px; 
margin-bottom: -80px; 
float: right;} 
.centerbox{ 
height:100px; 
background-color: blue;} 
.centerboxcontent{ 
padding: 0px 0px 0px 0px;} 
.right-content{ 
padding: 80px 0px 0px 0px; 
text-align: right;} 
.left-content{ 
padding: 80px 0px 0px 0px;} 
.footer{ 
    clear:both;} 
.footerleft{ 
height: 100%; 
background-color: red; 
width: 50px; 
float: left;} 
.footerleftcon{ 
padding: 0px 0px 0px 0px;} 
.footerright{ 
height: 100%; 
background-color: red; 
width: 50px; 
float: right;} 
.footerrightcon{ 
padding: 0px 0px 0px 0px;}

источник

2013-04-16 Christopher

* { 
    margin: 0px; 
    padding: 0px; 
} 
html, body { 
    height: 100%; 
} 
.header, .footer { 
    height: 80px; 
    background-color: #EFEFEF; 
} 
.header-content { 
    padding: 20px; 
    text-align: center; 
} 
.headerleft { 
    height: 100%; 
    background-color: red; 
    width: 50px; 
    float: left; 
} 
.headerleftcon { 
    padding: 0px 0px 0px 0px; 
} 
.headerright { 
    height: 100%; 
    background-color: red; 
    width: 50px; 
    float: right; 
} 
.headerrightcon { 
    padding: 0px 0px 0px 0px; 
} 
.footer-content { 
    padding: 20px; 
    text-align: center; 
} 
.container { 
    width: 100%; 
    min-height: 100%; 
    position: relative; 
    overflow: hidden; 
} 
.body { 
    background-color: #C7DFFA; 
    overflow: hidden; 
    margin-bottom: -30000px; 
    padding-bottom: 30000px; 
} 
.content { 
    margin-right: 50px; 
    margin-left: 50px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
    margin-bottom: 80px; 
} 
.left-sidebar { 
    background-color: gray; 
    width: 50px; 
    float: left; 
} 
.right-sidebar { 
    background-color: gray; 
    width: 50px; 
    float: right; 
} 
.left-sidebar, .right-sidebar { 
    margin-bottom: -30000px; 
    padding-bottom: 30000px; 
} 
.centerbox { 
    background-color: blue; 
} 
.centerboxcontent { 
    padding: 0px 0px 0px 0px; 
} 
.right-content { 
    text-align: right; 
} 
.left-content { 
} 
.footer { 
    clear:both; 
    position: absolute; 
    width: 100%; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
} 
.footerleft { 
    height: 100%; 
    background-color: red; 
    width: 50px; 
    float: left; 
} 
.footerleftcon { 
    padding: 0px 0px 0px 0px; 
} 
.footerright { 
    height: 100%; 
    background-color: red; 
    width: 50px; 
    float: right; 
} 
.footerrightcon { 
    padding: 0px 0px 0px 0px; 
}

источник

2013-04-16 23:12:47 yatanson

Спасибо за помощь, очень ценю. – Christopher

Я понимаю, что получение колонтитула веб-сайта несколько сложнее, чем все остальное, но я не знаю, сколько еще вопросов я должен видеть о это просто призыв к изучению CSS, теперь вот две скрипки, которые я сделал ранее по одному и тому же вопросу.

Итак, что вам нужно сделать, это убедиться, что нижний колонтитул абсолютно у основания вашего контейнера, поэтому для этого вам нужно сделать свою позицию в контейнере: относительную; и 100% высоты содержимого. Также в контейнере должно быть дно заполнения, которое является высотой нижнего колонтитула. это все действительно

http://jsfiddle.net/eTwJh/2/ и вот один без содержания - http://jsfiddle.net/eTwJh/3/

Дубликат вопрос находится здесь

How do I make sure that my footer shows all the way at end of the page rather than in the middle?

здесь несколько примеров кода

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Amazing Footer</title> 
    <style> 
    html, body { 
     margin:0; 
     padding:0; 
     height:100%; 
    } 
    .wrapper { 
     min-height:100%; 
     position:relative; 
    } 
    footer{ 
     background:#F1F1F1; 
     position: absolute; 
     bottom: 0px; 
     left: 0px; 
     width: 100%; 
     height:300px; 
    } 

    footer p{ 
     text-align: center; 
     padding-top:100px; 
    } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="Content"> 
      <p>HTML Ipsum Presents</p> 
     </div> 
     <footer> 
      <p>&copy; My Website 2013. All Rights Reserved!</p> 
     </footer> 

    </div> 
</body> 
</html>

источник

2013-04-16 21:48:56 iConnor

Спасибо вы за вашу помощь. – Christopher

Нет, проблема Удача – iConnor

@ JustDon't, вы тестировали в IE7, IE8? – RGS

CSS - Как сделать нижний колонтитул в нижней части страницы?

ответ

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