纯CSS的2列具有相同的高度，但拉伸到最小高度100％ [英] Pure CSS for 2 columns with the same height but stretching to a min-height of 100%
问题描述
我正在使用我的网络应用程序的模板。它应该有一个标题，一个页脚，一个主体和一个带有渐变背景的侧边菜单。页面应该看起来类似于任何分辨率从800x600开始，因为我使用percentajes而不是固定的大小。此外，它应该在IE7 / 8中工作，所以我试图避免CSS3和webkit / gecko只有功能
I'm working on a template for my web app. It should have a header, a footer, a body and a side menu with a gradient background. The page should look similar in any resolution starting from 800x600, and because of that I'm using percentajes instead of fixed sizes. Also, it should work in IE7/8, so I'm trying to avoid CSS3 and webkit/gecko only features
因为正文内容可能超过屏幕的大小，我正在使用此方法来保持列的高度相同。
Since the body content might exceed the size of the screen, I'm using this approach to keep the column's height the same.
我面临的问题是：当主体内容小于屏幕，并且不需要滚动时，列的背景填充了可用视口的100％，不包括页眉和页脚。
The problem I'm facing is: when the body content is smaller than the screen, and no scroll needed, it would be desirable that the column's background fill the 100% of the available viewport, excluding header and footer.
我认为自己更像一个Java人比一个网页设计师，所以我不太确定我在做什么CSS谈到，但我试过这，没有结果。有没有办法实现我的目标没有javascript？
I consider myself more a Java guy than a web designer, so I'm not pretty sure what I'm doing when it comes to CSS, but I've tried this with no results. Is there a way to achieve my goal without javascript?
这里是我的代码。尽管我在提出这个问题之前努力清理它，但由于我已经测试的所有更改，它可能看起来不清楚。
Here is my code. In spite of my efforts to clean it up before asking this question, it might seem unclean due to all the changes I've been testing.
CSS
* {
margin-top: 0;
margin-bottom:0;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
background-color: rgb(216, 218, 234);
}
#container {
width: 80%;
min-height: 100%;
height: 100%;
margin-left: 10%;
margin-right: 10%;
background-color: rgb(255, 255, 204);
}
#header {
min-height:120px;
height: 19%;
width: 100%;
background-color: #CCC;
clear: both;
float: left;
}
#subcontainer {
clear: both;
min-height: 77%;
height: auto !important;
height: 100%;
background-color: rgb(255, 255, 204);
position: relative;
}
#menuback {
float: left;
width: 100%;
min-height: 100%;
position:relative;
right:85%;
background: #088316;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#088316), to(#FFFFFF));
background: -webkit-linear-gradient(#088316, #FFFFFF);
background: -moz-linear-gradient(#088316, #FFFFFF);
background: -ms-linear-gradient(#088316, #FFFFFF);
background: -o-linear-gradient(#088316, #FFFFFF);
background: linear-gradient(#088316, #FFFFFF);
-pie-background: linear-gradient(#088316, #FFFFFF);
behavior: url(/pie/PIE.htc);
}
#menu {
float: left;
width: 15%;
min-height:100%;
position:relative;
left:85%;
}
#fondocuerpo {
float: left;
width: 100%;
min-height:100%;
overflow:hidden;
position:relative;
background-color: #DDF;
}
#cuerpo {
float: left;
width: 85%;
min-height:100%;
position:relative;
left:85%;
}
#footer {
clear:both;
width: 100%;
height:4%;
background: #007F0E;
}
HTML
<body>
<div id="container">
<div id="header">
<p>Header</p>
</div>
<div id="subcontainer">
<div id="fondocuerpo">
<div id="menuback">
<div id="menu">
<p>Menu</p>
</div>
<div id="cuerpo">
<p>body</p>
<p>body</p>
<p>body</p>
</div>
</div>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
And this is how it should behave when the content is smaller than the viewport.
推荐答案
这是最近的我可以得到。它应该工作在ie8 +，不太确定ie7虽然，因为我没有浏览器，我可以测试它。
This is the closest I could get. It should work in ie8+, not too sure about ie7 though as I don't have a browser I can test it on.
我已经去了固定高度页眉和页脚因为我认为如果内容大于百分比大小，会导致模板破坏
I have gone with fixed height header and footer as I thought if the content is larger than the percentage size, it will cause the template to break
HTML
<div id="wrapper">
<div id="header">header text</div>
<div id="leftColumn"></div>
<div id="rightColumn"></div>
<div id="footer">footer text</div>
</div>
CSS
html,
body {min-height:100%; padding:0; margin:0;}
#wrapper {padding:50px 0; position:absolute; top:0; bottom:0; left:0; right:0;}
#leftColumn,
#rightColumn {min-height:100%; float:left; width:50%;}
#header {margin-top:-50px; height:50px;}
#footer {clear:both; margin-bottom:-50px; height:50px;}
这个解决方案并不太好，列增长高于初始窗口高度，另一列不会由于某种原因生长。
This solution isn't too great though as if one column grows taller than the initial window height, the other column doesn't grow for some reason.
由于您的解决方案需要与IE7兼容，一个纯CSS解决方案，我会用一个简单的jquery：
As your solution needs to be compatible with IE7 and as there isn't a pure css solution, I would go with a simple jquery:
这篇关于纯CSS的2列具有相同的高度，但拉伸到最小高度100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
