Question

我正在处理我的网络应用的模板。它应该有一个页眉，一个页脚，一个正文和一个带有渐变背景的侧面菜单。从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是内容小于视口时的行为方式。

Answer 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/

适用于2列的纯CSS，高度相同，但最小高度为100％

1 个答案: