具有相同高度但拉伸到 100% 的最小高度的 2 列的纯 CSS答案

【问题标题】：Pure CSS for 2 columns with the same height but stretching to a min-height of 100%具有相同高度但拉伸到 100% 的最小高度的 2 列的纯 CSS
【发布时间】：2013-05-17 23:28:40
【问题描述】：

我正在为我的网络应用程序制作模板。它应该有一个页眉、一个页脚、一个正文和一个带有渐变背景的侧边菜单。该页面在从 800x600 开始的任何分辨率下都应该看起来相似，因此我使用的是 percentajes 而不是固定尺寸。此外，它应该在 IE7/8 中工作，所以我试图避免 CSS3 和 webkit/gecko 唯一的功能

由于正文内容可能超出屏幕大小，我使用this 方法来保持列的高度不变。

我面临的问题是：当正文内容小于屏幕并且不需要滚动时，列的背景最好填充 100% 的可用视口，不包括页眉和页脚。

我认为自己更像是一个 Java 人，而不是网页设计师，所以我不太确定自己在 CSS 方面做什么，但我尝试了this，但没有任何结果。有没有办法在没有 javascript 的情况下实现我的目标？

这是我的代码。尽管我在提出这个问题之前努力清理它，但由于我一直在测试的所有更改，它可能看起来不干净。

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">
                        &nbsp;
                        <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>

而this 是当内容小于视口时它的行为方式。

【问题讨论】：

我正面临着这个问题，我求助于 jQuery，但在我发布的问题中创建了另一个解决方案，可能会有所帮助。 stackoverflow.com/questions/16592597/…
这需要兼容哪些浏览器？
也是已知（固定）高度的页眉和页脚
@Pete 我的目标是 Chome 和 Firefox，但我的主要客户端使用 IE7。关于页眉和页脚，我正在使用 percentajes，因为我希望它们根据用户的屏幕分辨率缩小或扩展（我的主客户端有一台相当旧的计算机并使用 800x600），但如果可以解决，我可以将它们设置为固定高度问题。

标签： cross-browser css

【解决方案1】：

这是我能得到的最接近的。它应该可以在 ie8+ 中运行，但对 ie7 不太确定，因为我没有可以测试它的浏览器。

我已经使用了固定高度的页眉和页脚，因为我认为如果内容大于百分比大小，则会导致模板损坏

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;}

http://jsfiddle.net/naqE6/33/

这个解决方案不是很好，好像一列比初始窗口高度高，另一列由于某种原因没有增长。

由于您的解决方案需要与 IE7 兼容，并且没有纯 css 解决方案，我会选择一个简单的 jquery：

http://jsfiddle.net/naqE6/36/

【讨论】：