Question

我有一个带有粘性页脚的CSS布局。该网站的主要部分是一些侧边栏和内容框。但我似乎无法将上下文框和周围的div扩展到“100％”的高度。

如果内容框包含短文本，它不会跨越整个高度，如果它包含大量文本，则周围的div不会。

结果应该是内容框和浮动背景扩展到页脚正上方页面底部的网站。

编辑：在#inner中添加“overflow：hidden”可以解决背景问题，而不会排列长内容。但我仍然无法让#content div扩展为整页高度。

http://jsfiddle.net/s6yf3/（维基百科徽标只是为了更好的可视化）

<div id="wrapper">
  <div id="inner">   
    <header>
      <a href="#">
        <img src="//upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" alt="Logo" width=400 height=100 />
      </a>
      <nav>
        <ul>
          <li><a href="#">Menu1</a></li>
          <li><a href="#">Menu2</a></li>
        </ul>
      </nav>
    </header>
    <div id="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec libero vitae massa bibendum molestie ac non justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent in dui arcu, nec ornare nibh.
    </div>
    <div id="sidebar">
      <div>Element</div>
      <div>Element</div>
      <div>Element</div>
    </div>
  </div>
</div>
<div id="footer">
  <p>Sticky Footer</p>
</div>

body {
  margin:0;
  padding:0;
  background:#eee;
}

html,body {
  height:100%; 
}

#wrapper {
  width:400px;
  height: auto !important;
  height:100%;
  margin:0 auto;
  min-height:100%;
}

#inner {
  height: 100%;
  padding:0 0 55px 0;
  background-color: #ccc;
  background-image: url(//upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png);
  background-repeat: repeat-x;
  background-position: right bottom;
  overflow: hidden;
}

#inner p {
  margin:1em 1em 0;
  padding:.15em .25em;  
}

#inner header {
  margin: 0; 
  padding: 0;
  height: 160px;
}

#wrapper header nav ul {
  list-style-type: none;
  margin-top: 4px;
  padding-left: 240px;
  height: 46px !important;
  z-index: 999;
  position: absolute;
}

#wrapper header nav ul li {
  display: inline-block;
}

#wrapper header nav ul li a {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  height: 40px !important;
  line-height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  text-decoration: none;
  display: block;
}

#wrapper header nav ul li a:hover {
  background-color: #333 !important;
  color: #fff;
  z-index: 2;
}

#wrapper header nav ul li.active a {
  font-size: 18px;
  font-weight: bold;
  background-color: #333 !important;
  color: #fff;
  height: 46px !important;
  line-height: 46px;
  display: block !important;
  padding-left: 10px;
  padding-right: 10px;
  text-decoration: none;
}

#sidebar div {
  width: 100px;
  min-height: 60px;
  background-color: #ddd;
  margin-bottom: 20px;
}

#content {
  width: 250px;
  height: 100%;
  position: relative;
  float: right;
  background-color: #ddd;
}

#footer {
    width:400px;
    height:55px;
    margin:-55px auto 0;
    background:#222;
    overflow:hidden;
}

#footer p{
    margin:0;
    padding:.5em 0 0;
    font-weight:bold;
    text-align:center;
    color:#FFF;
}

Answer 1

将overflow:hidden;提供给包装器div，从页脚中删除高度和margin-left: -55px，它应该按预期运行。

更新的标签

http://jsfiddle.net/Tnc4t/4/

Answer 2

因为#inner和#wrapper的高度为100％，所以我将#footer放在#inner中并从#inner中删除了65px的底部填充。

jFiddle：http://jsfiddle.net/rPGTq/

<div id="wrapper">
  <div id="inner">   
    <header>
      ...
    </header>
    <div id="content">
      ...
    </div>
    <div id="sidebar">
      ...
    </div>
    <div id="footer">
      <p>Sticky Footer</p>
    </div>
  </div>
</div>

100％浮动div高度：自动父级

2 个答案: