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

如果内容框包含短文本,则不会跨越整个高度,如果内容框包含很多文本,则周围的div不会。

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

编辑:在#inner中添加“溢出:隐藏”可解决背景不与长内容对齐的问题。但是我仍然无法使#content div扩展到整个页面高度。

http://jsfiddle.net/s6yf3/(Wikipedia徽标只是为了更好地可视化)

<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;
}

最佳答案

overflow:hidden;赋予包装器div,从页脚中删除高度和margin-left: -55px,它的行为应与预期一致。

更新场

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

关于height - 100% float div高度:自动父级,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14923239/

10-11 15:03
查看更多