Question

所以我想知道是否有可能使用css（不知何故）使html / body达到最小100％的高度并根据需要进行扩展？现在我有一个弹性盒，其中主体占据剩余空间（如预期的那样）。

在实际网站上，正文可能不占用整个页面，所以我希望flexbox填充它并让页脚卡在底部，但是当显示在较小的屏幕（即移动）上时它会最有可能填满可见屏幕。此时（或者如果身体最终填满了屏幕），我希望页脚继续沿着它的快乐方式继续下去。

没有在flexbox容器上绘制边框，它似乎按预期工作。但是出于推测的原因，容器的边界/大小可能很重要，是否可以正确绘制（忽略溢出只是显示似乎是一个hacky工作的事实）。

我现在也接受javascript答案，但CSS将是最佳的

＆＃13;

html, body {
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  height: 100%;
}

.body {
  flex: 1;
  min-height: 300px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <header style="background-color: lightblue">
    header
  </header>
  <div class="body" style="background-color: orange; opacity: 0.3">
    body
  </div>
  <footer style="background-color: yellow">
    footer
  </footer>
</div>

＆＃13;

Answer 1

您可以使用标准percentage heights。但这有点棘手，坦率地说，没必要。只需使用viewport percentage units。

以下是您的代码的简化版本：

<div class="wrapper">
  <header style="background-color: lightblue">header</header>
  <div class="body" style="background-color: orange; opacity: 0.3;">body</div>
  <footer style="background-color: yellow">footer</footer>
</div>

while(0)

Answer 2

在包装器上使用min-height代替height：

html,
body {
  height: 100%;
  padding:0; 
  margin:0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  min-height: 100%;
  box-sizing: border-box;
}

.body {
  flex: 1;
  min-height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <header style="background-color: lightblue">
    header
  </header>
  <div class="body" style="background-color: orange; opacity: 0.3">
    body
  </div>
  <footer style="background-color: yellow">
    footer
  </footer>
</div>

Answer 3

如果我正确地回答了这个问题，也许会有所帮助：

<!DOCTYPE html>
<html>
  <head>
    <title>Fluid height content</title>
  </head>
  <body>
    <style>
    html { 
      height: 100%; 
    }
            
    body { 
      min-height: 100%;
    }
            
    .flex-container { 
      min-height: 100vh; 
    }
    </style>

    <div class="flex-container">
      Some content
    </div>
  </body>
</html>

设置html，身高最小高度：100％，但也允许它扩展

3 个答案: