1

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

由于正文内容可能超过屏幕的大小，我使用这种方法来保持列的高度相同。

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

我认为自己更像是一个 Java 人而不是网页设计师，所以我不太确定自己在 CSS 方面正在做什么，但我已经尝试过了，但没有任何结果。有没有办法在没有 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>

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

4

1 回答 1

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/

于 2013-05-17T15:07:28.663 回答