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

我认为自己是一个合理的标准CSS/XHTML小伙子，但我对此很困惑。帮助CSS - 获得一个元素来填充剩余的垂直空间的100％

问题在这里：http://furnace.howcode.com - （请注意，该网站仍在开发中，大多数内容不起作用，并且它可能会很快更新，因为它经常更新）。

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

这里的设计师如何invisioned它的截图（我为我的画图工具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，我将很快变成标签。不过，我希望Col2 div能够将BENEATH浮动并填充剩余垂直高度的100％（即，转到屏幕底部，不管分辨率是什么），Col3将放在Col2当前放置的位置（它当Col2在正确的地方时，通常会自动出现！）。

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

干杯！杰克

来源

2010-05-08 Jack

提出三点高度：100点％的div（COL1，COL2，COL3）从顶部到达到底部，并把标签等内col2。

来源

2010-05-08 12:24:31 Tgr

谢谢...我似乎记得有一些原因，我为什么不能这样做......但我会试试看怎么了。 – Jack 2010-05-08 12:27:58

-1

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

要解决此问题，您必须使用Javascript来修复可滚动区域的高度。你必须根据页面加载时窗口的高度来修正div的高度，如果窗口调整大小，还要调整div的大小。

这样的财产以后可以工作：

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

只需更换标识是你的ID在HTML

来源

2010-05-08 12:14:28 StevenGilligan

我很欣赏答案，但我已经有固定的可滚动区域工作：当然，你可以使用overflow-y：scroll？它似乎在我的情况下工作。我只需要知道如何将Col2放在Tab div下面，并将它保留在那里，无论我们处于什么样的分辨率。 – Jack 2010-05-08 12:16:15

除非我误解了你的答案...... – Jack 2010-05-08 12:16:36

真正的javascript如何？知道如何写任何？ – sproketboy 2013-02-06 22:17:54

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

回答

相关问题