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

I'd consider myself a reasonable standard CSS/XHTML chap but I'm pretty baffled by this.

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

The problem is available here: http://furnace.howcode.com - (note that the site is still in development, most stuff doesn't work, and it's likely to change fairly quickly as it is updated often).

问题可以在这里找到：http：//furnace.howcode.com - （注意该网站仍处于开发阶段，大多数东西都不起作用，并且它可能会因为经常更新而变化相当快）。

Basically I've got a fluid layout that needs to work in the same proportions on any resolution.

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

Here's a screenshot of how the designer invisioned it (I apologise for my Paint-tool anotations): how the designer wants it to look http://files.droplr.com/files/49111734/XVu5m.howcode_working4.png

这是设计师如何选择它的屏幕截图（我为我的Paint-tool anotations道歉）：设计师如何看待它http://files.droplr.com/files/49111734/XVu5m.howcode_working4.png

I want the tabs and the search box to STAY at the top of Col2, whilst there should be a scrollable area beneath it where the results are returned. I want NO vertical viewport scrolling, only within the 100%-height area thingy.

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

My problem is this. If you take a look at http://furnace.howcode.com, you'll see that I've got a bit of a problem. I've made a placeholder black-background div which I will turn into the Tabs shortly. However I want the Col2 div to float BENEATH this and fill 100% of the remaining vertical height (i.e. go to the bottom of the screen, nomatter what the resolution is) and Col3 to be in the place where Col2 currently has been put (it normally is there automatically, when Col2 is in the right place!).

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

I hope that makes sense. If you need to me to clarify please just ask.

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

Cheers! Jack

干杯!插口

2 个解决方案

#1

Make three height:100% divs (col1, col2, col3) that reach from top to bottom, and put the tabs etc. inside col2.

制作三个高度：从顶部到底部到达的100％div（col1，col2，col3），并将标签等放在col2中。

#2

-1

I really think you cannot do this simply by using HTML and CSS. Simply because if you want to have a scrollable div you have to give it a fixed height but I am pretty sure that if you give it a height of 100% it will just expand to show all its content.

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

For this solution to work, you would have to use Javascript to fix the height of the scrollable area. You would have to fix the height of that div based on the height of the window when the page loads and also resize the div if the window resizes.

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

Somthing like this could work :

像这样的东西可以工作：

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

Just replace the IDs to be your IDs in the HTML

只需将ID替换为HTML中的ID即可

#1