Question

我认为自己是一个合理的标准CSS / XHTML，但我对此感到非常困惑。

问题出现在这里：http://furnace.howcode.com - （请注意，该网站仍在开发中，大部分内容都不起作用，并且由于经常更新，因此可能会相当快速地更改。）

基本上我有一个流畅的布局，需要在任何分辨率上以相同的比例工作。

以下是设计师如何选择它的屏幕截图（我为我的Paint-tool anotations道歉）： how the designer wants it to look http://files.droplr.com/files/49111734/XVu5m.howcode_working4.png

我希望标签和搜索框保持在Col2顶部，而在它下方应该有一个可滚动的区域，返回结果。我想要没有垂直视口滚动，只在100％ - 高度区域内。

我的问题是这个。如果你看一下http://furnace.howcode.com，你会发现我有点问题。我做了一个占位符黑背景div，我很快就会变成Tabs。但是我希望Col2 div浮动BENEATH这个并填充剩余垂直高度的100％（即到屏幕底部，无论分辨率是多少）和Col3在Col2当前放置的位置（它当Col2在正确的位置时，通常会自动出现！）。

我希望这是有道理的。如果您需要我澄清，请询问。

干杯！千斤顶

Answer 1

制作三个高度：100％divs（col1，col2，col3）从上到下，并将标签等放在col2中。

Answer 2

我真的认为你不能简单地使用HTML和CSS来做到这一点。只是因为如果你想拥有一个可滚动的div，你必须给它一个固定的高度，但我很确定如果你给它一个100％的高度，它只会展开以显示它的所有内容。

要使此解决方案起作用，您必须使用Javascript来修复可滚动区域的高度。您必须根据页面加载时窗口的高度来修复该div的高度，并在窗口调整大小时调整div的大小。

这样的事情可行：

$(document).ready(function(){
    $("#myScrollableDiv").height($(window).height() - $("#myHeader").height());
});

只需将ID替换为HTML

中的ID即可

帮助CSS - 获取一个元素来填充100％的剩余垂直空间

2 个答案: