强制 <div> 填充所有可用的垂直空间答案

【问题标题】：Force <div> to fill all available vertical space强制 <div> 填充所有可用的垂直空间
【发布时间】：2016-05-26 21:53:25
【问题描述】：

我在网上看到了很多方法来做到这一点，但我尝试过的所有方法要么破坏页面上的其他 CSS，要么不能一起工作。

在此页面http://www.psyklopz.com/workbench/ 我想让#container 元素的高度增加，以便页脚接触屏幕底部。

你会怎么做？

【问题讨论】：

标签： html css

【解决方案1】：

我参观了这个景点。好吧，如果您的内容很短，并且您仍然希望将页脚放在屏幕底部。将此添加到您想要位于底部的 div 或容器的 css 中。

position: absolute;
left: 0;
right: 0;
bottom: 0;

【讨论】：

谢谢！ left:0, right:0 是我需要的。没有它，它会掉到左边的角落！
哦不！这会导致页脚覆盖 #contain 元素高于页面的页面上的内容。
我没有使用你给我的东西，但你让我离答案更近了，所以我非常感谢你！

【解决方案2】：

你也可以这样做：

HTML

<body>
    <div id="container"></div>
    <div id="footer"></div>
</body>

样式

html,body {height: 100%;}
body{ position: relative;}
#footer { position: absolute; bottom: 0;}

容器 div 不会一直向下拉伸，但巧妙地使用 BG 颜色可以让它看起来像它。

【讨论】：

我发现在我将 html 高度设置为 100% 之前没有任何效果。感谢您的提示。
@user1208434 为我工作 +1。 - 你还记得你在哪里找到那个设置吗？网址？

【解决方案3】：

将height:100%; 添加到#page 和#contain div。这会让你得到你想要的。

【讨论】：

不，试过了。它搞砸了其他页面布局。不过还是谢谢。

【解决方案4】：

您好，请看现场演示：-

http://jsfiddle.net/BER5x/2/

您可以使用此代码，它固定在底部，并且没有您的页脚顶部曲线图像，它的完全 css 边框半径属性您不需要在您的 css 中使用页脚顶部。

希望对你有帮助......

【讨论】：

好主意，我非常感谢您的帮助。在另一个答案中查看我的解决方案，边界半径做了很多！
感谢您可以使您的页脚完全基于 CSS，如果您将在页脚中使用边框半径和背景颜色，则不需要任何图像.....

【解决方案5】：

我最终使用了position: fixed; 并设置了bottom: 0; top: 0; left: 0;。然后我使用了一段 jQuery .animate() 魔术来完成它。这是工作代码和一个多合一的演示！ http://www.psyklopz.com/workbench/jquery-based-dock-toolbar/

【讨论】：

链接已损坏。

【解决方案6】：

我知道这是一篇旧帖子，但我今天发现自己遇到了类似的问题。

我想要一个容器（带有地图）来填充视口，但它上方必须有一个 32 像素高的容器。该地图使得有必要将容器真正扩展到其最大可能大小并且不与其他任何东西重叠。我最终使用了一个没有任何 javascript 的灵活而优雅的解决方案：

<div class="tab"><div class="tabContent" /></div
<div class="container" />

还有 CSS：

.tab {
  height: 0;
  width: 100%;
}
.tabContent {
  height: 32px;
}
.container {
  height: 100%;
  padding-top: 32px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

诀窍是使用 box-sizing:border-box 使 height:100% 包含定义的填充。

我还创建了一个 jsfiddle：http://jsfiddle.net/YWLLM/2/ 我不得不在小提琴中使用固定的车身高度，因为（至少在 chrome 中）iframe body height: 100% 不起作用。我还添加了一些边框来可视化，没有任何东西被切断（容器溢出：隐藏）

【讨论】：