Question

我想创建一个这样的布局 -

页脚很粘。

以下是我尝试的代码：

body {
  position: relative;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

html,
body {
  height: 100%;
  margin: 0;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
}

.page-wrap {
  min-height: 100%;
  margin-bottom: -45px;
  background-color: #f2f2f2;
}

#header {
  height: 80px;
  width: 100%;
  background-color: #fdbb30;
  position: relative;
  padding-bottom: 10px;
}

.adminpanelContainer {
  background-color: white;
  padding: 40px;
  margin-top: 20px;
  height: 100%;
}

#footer {
  width: 100%;
  background-color: #fff;
  z-index: 1;
}

#footerwrapper {
  height: 45px;
}

<body>
  <div class="page-wrap">
    <header id="header">
      <div class="container"></div>
    </header>
    <div id="body">
      <div class="container" style="height:100%;">
        <div class="panelContainer"></div>
      </div>
    </div>
  </div>
  <footer id="footer">
    <div class="container" id="footerwrapper"></div>
  </footer>
</body>

我将height: 100%提供给.adminpanelContainer及其祖先，但对此没有任何影响。

我希望白色区域扩展到整个网页，无论其高度如何。

我必须做出哪些更改才能将div扩展到最低层。

Answer 1

这适合您：

我刚刚添加了↓

#body .container{
  height: calc(100vh - (90px + 45px));
}

计算如下：

height: calc(100ViewportHeight - (#header[height+padding-bottom]+ #footerwrapper[height]));

如果您想详细了解calc和vh，请点击它们。

您的代码段中的工作示例：

body {
  position: relative;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

html,
body {
  height: 100%;
  margin: 0;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
}

.page-wrap {
  min-height: 100%;
  margin-bottom: -45px;
  background-color: #f2f2f2;
}

#header {
  height: 80px;
  width: 100%;
  background-color: #fdbb30;
  position: relative;
  padding-bottom: 10px;
}

.adminpanelContainer {
  background-color: white;
  padding: 40px;
  margin-top: 20px;
  height: 100%;
}

#footer {
  width: 100%;
  background-color: #fff;
  z-index: 1;
}

#footerwrapper {
  height: 45px;
}

#body .container{
  height: calc(100vh - (90px + 45px));
}

<body>
  <div class="page-wrap">
    <header id="header">
      <div class="container">

      </div>
    </header>
    <div id="body">
      <div class="container" >
        <div class="panelContainer">

        </div>
      </div>
    </div>
  </div>
  <footer id="footer">
    <div class="container" id="footerwrapper">

    </div>
  </footer>
</body>

希望这对你有所帮助。

Answer 2

如果您可以重新构建HTML，则可以使用flex轻松创建此布局：

转到整页以获得更好的结果

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  height: 80px;
  background-color: #fdbb30;
  position: relative;
  padding-bottom: 10px;
}

footer {
  height: 45px;
  background-color: #fff;
  z-index: 1;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  border: 1px solid;
}

.content {
  flex: 1;
  background: red;
  padding: 20px;
}

.content>.container {
  height: 100%;
}

.adminpanelContainer {
  background-color: #ccc;
  padding: 40px;
  height: 100%;
}

<header>
  <div class="container">
    header content
  </div>
</header>

<div class="content">
  <div class="container">
    <div class="adminpanelContainer">
      full height content
    </div>
  </div>
</div>
<footer>
  <div class="container">
    footer content
  </div>
</footer>

Answer 3

在不调整任何现有标记的情况下，也可以通过为适用的嵌套元素声明<percentage>高度单位值来实现预期的行为。

首先声明相对高度（百分比单位值）对于元素#body - 帐户的合并height 嵌套header＆amp; footer元素，例如：
```
#body {
    /* 100% height minus the sum of header & footer height */
    height: calc(100% - 125px);
}
```
接下来，为任何进一步嵌套的元素声明height: 100% 需要占据视口的完整可用高度， e.g：
```
.panelContainer {
    height: 100%;
}
```

下面的代码段显示了fixed和relative页脚元素的这种行为。

固定页脚：

body {
  position: relative;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

html,
body {
  height: 100%;
  margin: 0;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.page-wrap { /* adjusted */
  height: 100%;
  background-color: #f2f2f2;
}

#header {
  height: 80px;
  width: 100%;
  background-color: #fdbb30;
  position: relative;
  padding-bottom: 10px;
}

.adminpanelContainer {
  background-color: white;
  padding: 40px;
  margin-top: 20px;
  height: 100%;
}

#footer {
  width: 100%;
  background-color: #fff;
  z-index: 1;
  /* additional */
  position: fixed;
  bottom: 0;
}

#footerwrapper {
  height: 45px;
}

/* Additional */
* {
  box-sizing: border-box;
}

#body {
    height: calc(100% - 125px); /* 100% height minus the sum of header & footer height */
}

.panelContainer {
    height: 100%;
    /* following styles added just for the sake of demonstration */
    background: white;
    border: 1px solid #d6d6d6;
    box-sizing: border-box;
    max-width: 80%;
    margin: auto;
}

.panelContainer .inner {
  position: relative;
  height: 100%;
}

.panelContainer .inner span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    margin: auto;
}

<body>
  <div class="page-wrap">
    <header id="header">
      <div class="container">
        <span>height: 80px</span>
      </div>
    </header>
    <div id="body">
      <div class="container" style="height:100%;">
        <div class="panelContainer">
          <div class="inner"><span>relative height declared with <code>percentage</code> values</span></div>
        </div>
      </div>
    </div>
  </div>
  <footer id="footer">
    <div class="container" id="footerwrapper">
      <div class="container">
        <span>height: 45px</span>
      </div>
    </div>
  </footer>
</body>

相对页脚：

body {
  position: relative;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

html,
body {
  height: 100%;
  margin: 0;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.page-wrap { /* adjusted */
  height: 100%;
  background-color: #f2f2f2;
}

#header {
  height: 80px;
  width: 100%;
  background-color: #fdbb30;
  position: relative;
  padding-bottom: 10px;
}

.adminpanelContainer {
  background-color: white;
  padding: 40px;
  margin-top: 20px;
  height: 100%;
}

#footer {
  width: 100%;
  background-color: #fff;
  z-index: 1;
  /* additional */
  position: relative;
  bottom: 0;
}

#footerwrapper {
  height: 45px;
}

/* Additional */
* {
  box-sizing: border-box;
}

body {
    padding-bottom: 45px;
}

#body {
    height: calc(100% - 80px); /* 100% height minus the height of the header */
}

.panelContainer {
    height: 100%;
    /* following styles added just for the sake of demonstration */
    background: white;
    border: 1px solid #d6d6d6;
    box-sizing: border-box;
    max-width: 80%;
    margin: auto;
}

.panelContainer .inner {
  position: relative;
  height: 100%;
}

.panelContainer .inner span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    margin: auto;
}

<body>
  <div class="page-wrap">
    <header id="header">
      <div class="container">
        <span>height: 80px</span>
      </div>
    </header>
    <div id="body">
      <div class="container" style="height:100%;">
        <div class="panelContainer">
          <div class="inner"><span>relative height declared with <code>percentage</code> values</span></div>
        </div>
      </div>
    </div>
  </div>
  <footer id="footer">
    <div class="container" id="footerwrapper">
      <div class="container">
        <span>height: 45px</span>
      </div>
    </div>
  </footer>
</body>

实用的交互式CodePen演示：

在这里，您可以观察fixed和relative页脚的实际演示，这些演示允许动态添加或删除内容。此外，这些演示还考虑了动态页脚高度。

div没有延伸到底部

3 个答案: