3

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

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

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

编辑：将“溢出：隐藏”添加到#inner 修复了背景不与长内容对齐的问题。但我仍然无法让#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;
}
4

2 回答 2

0

因为#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>
于 2013-02-17T18:16:34.557 回答
0

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

更新的小提琴

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

于 2013-02-17T16:34:24.423 回答