Как правильно расположить нижний колонтитул? - PullRequest
1 голос
/ 25 мая 2011

Я хочу расположить нижний колонтитул у базовой линии моего #wrapper, но все, что я могу сделать, это разместить нижний колонтитул под оберткой Может кто-нибудь сказать, пожалуйста, почему это происходит?

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>sd</title>
<style type="text/css">
  html, body {
  width:100%;
  background:brown;
  border:0px solid red;
  margin:0;
  padding:0;
  }
  #wrapper {
  width:1220px;
  height:750px;
  padding:0;
  margin:0 auto;
  background:#ccc;
  border:3px solid white;
  }
  #header {
  background-color:#aaa;
  width:100%;
  height:100px;
  padding:0;
  margin:0 auto 0 auto;
  border:0px solid;
  }
  #content {
  float:left;
  width:100%;
  height:649px;
  padding:0;
  margin:0;
  border:0px solid;
  }
  #cell-left {
  background-color:#bbb;
  float:left;
  width:200px;
  height:100%;
  padding:0;
  margin:0;
  border:0px solid;
  }
  #cell-right {
  float:right;
  width:1010px;
  height:100%;
  padding:0;
  margin:0;
  border:0px solid;
  }
  #footer {
  float:left;
  width:100%;
  height:25px;
  padding:4px;
  margin:0;
  text-align:center;
  border:1px solid;
  }
  </style>
</head>
<body>
  <div id="wrapper">
    <div id="header"></div>
    <div id="content">
      <div id="cell-left">dsssd</div>
      <div id="cell-right">dsssd</div>
    </div>
    <div id="footer">sdsd</div>
  </div>
</body>
</html>

Ответы [ 2 ]

2 голосов
/ 25 мая 2011

Вы должны удалить фиксированную высоту на #wrapper (height:750px) и очистить всплывающие элементы внутри #wrapper.

Самый простой способ сделать это -добавьте overflow: hidden к #wrapper.

См .: http://jsbin.com/iciwo6

Измененный CSS:

#wrapper {
overflow:hidden;
width:1220px;
padding:0;
margin:0 auto;
background:#ccc;
border:3px solid white;
}
0 голосов
/ 25 мая 2011

Вы упомянули высоту обертки 750, которая показывает проблему. Просто проясните это и дайте height:auto Вы дали

 header:  `height:100px;` 
content: height:649px;

, поэтому он занимает почти 750 пикселей. Так что нет места для нижнего колонтитула. Поэтому он идет чуть ниже оболочки. Так что попробуйте дать высоту: auto.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...