Question

我使用粘性页脚并且有一个div，我需要一直延伸到页脚。不幸的是，当我添加高度：100％时，它没有帮助。我也尝试将其显示为css中的表格，但这也无济于事。

HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"><head>
  <meta charset="utf-8">
  <link href="css/test.css" rel="stylesheet">
</head>
<body>

<div class="navbar">
Navbar
</div>


<div id="wrap">
  <div class="container fill">
    <div class="page-header">
      <h1>Sticky footer</h1>
    </div>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
  </div>
  <div id="push"></div>
</div>


<div id="footer">
  Footer
</div>


</body>
</html>

CSS：

*{
    margin: 0;
}

html,
body {
  height: 100%;
}
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -50px;
}
#push,
#footer {
  height: 50px;
}
#footer {
  background-color: #f5f5f5;
}

/* Apply class .fill to div to be stretched to bottom of page */
.fill{
    height:100%;
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: red;
    padding-top:75px;
}
  .fill .row {
      height: 100%;
      display: table-row;
  }


.container
 {
  width: 940px;
}

.container {
  margin-right: auto;
  margin-left: auto;
}

.container:before,
.container:after {
  display: table;
  line-height: 0;
  content: "";
}

.container:after {
  clear: both;
}

.navbar {
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
  overflow: visible;
  background-color: orange;
}

Answer 1

最简单的方法是使用box-sizing: border-box并在元素上设置固定的百分比高度。如果您正在寻找页脚/导航的固定高度和内容的动态高度，那将会非常棘手。

通常我使用一个position: absolute的封包器到标题正下方和页脚上方的视口，然后使用内容中的div，使用height: 100%

第二种方法：

<nav>nav</nav>
<div id="wrap">
    <div class="content">content</div>    
</div>
<footer>footer</footer>

html,body { margin: 0 }
nav, footer { height: 20px; background: blue }
footer { position: absolute; bottom: 0; width: 100% }
#wrap { background: gray; position: absolute; bottom: 20px; top: 20px; right: 100px; left: 100px }
#wrap .content { height: 100% }

当调整窗口大小时，包装器将充当内容的固定高度。

Fiddle

幸运的是，随着浏览器采用css3，使用flexbox会更容易。

如何将div扩展为粘性页脚？

1 个答案: