Question

我已经看到了一些在线完成此操作的方法，但我尝试过的所有方法都打破了页面上的其他CSS或者不能一起工作。

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

你会怎么做？

Answer 1

你也可以这样做：

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颜色可以使它看起来像它。

Answer 2

我参观了这个景象。好吧，如果你的内容只是那么短，你想仍然把页脚触摸到屏幕的底部。将此添加到您想要位于底部的div或容器的css中。

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

Answer 3

您好看现场演示： -

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

你可以使用这个固定在底部的代码，而没有你的页脚顶部曲线图像，它的完全css边界半径属性你不需要在你的CSS中使用页脚顶部。

我希望这能帮到你......

Answer 4

我最终使用position: fixed;并设置了bottom: 0; top: 0; left: 0;。然后我使用了一段jQuery .animate()魔法将它拉下来。这是工作代码和演示一体机！ http://www.psyklopz.com/workbench/jquery-based-dock-toolbar/

Answer 5

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

我想要一个容器（带有地图）来填充视口，但是它上面必须有一个32px高的容器。地图使得有必要将容器真正扩展到其最大可能尺寸并且不与其他任何东西重叠。我最终使用了一个灵活而优雅的解决方案，没有任何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来设置高度：100％包含定义的填充。

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

Answer 6

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

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

6 个答案: