css - div 高度（百分比）和不需要的滚动条

Question

在这个演示页面中，我有 2 个问题：

1）我的页脚（我遵循了这些指南http://ryanfait.com/sticky-footer/）导致滚动条仅出现在 Firefox 上，我不明白原因

2) div#containerTop 由页脚 css 使用，它适合整个页面高度

    min-height: 100%; height: auto !important; height:100%

问题是我希望 div#rightContainer 具有一定的高度，我希望它几乎可以拉伸整个页面，（在它和页脚之间留下一些像素）。显然，我尝试了以 % 为单位的高度，但它没有用。

我尝试了一些我在周围找到的 CSS，但那些也没有用，可能是因为 div#rightContainer 已经在一个 div 容器内，使用了一个 CSS 高度技巧。

如果不重复使用 javascript，我能做什么？

score 1 · Accepted Answer

如果你想使用 % 作为高度，你必须把它放在每个父元素中：

<body style="height: 100%;">
    <div style="height: 100%;"></div>
</body>

也许您可以将容器设置为绝对值，但这并不是真正合适的编码风格。

score 0 · Accepted Answer

首先将div的父级高度和宽度设置为100%，并将html标签中的溢出设置为隐藏：

html{
     width: 100%;
     height: 100%;
     overflow: hidden; 
}
body{
     width: 100%;
     height: 100%;
}

然后相应地设置你的div的宽度和高度......

这里溢出属性完成任务。如果现在 body 超过了实际窗口大小的宽度/高度，则相应地减小 body 标签的大小。但这肯定会删除滚动条。

它对我有用。

2 回答 2