1

我正在我的网站上工作，我需要在高度上进行屏幕填充。它存在于容器中的 header-banner-content 中。

容器本身位于另一个更宽的 div（阴影框）中，因为存在淡出/阴影效果。因此 shadowbox 是 1150px 宽度和容器只有 1024px。

也许这是抑制内部 div 和工作宽度左右填充的更好方法，但我发现没有填充更好。

这是我的小提琴：

http://jsfiddle.net/Bartimi/REpTA/

<div id="shadowbox">
    <div id="container">
        <div id="header">
            MENU
        </div>
        <div id="banner">
            BANNER
        </div>
        <div id="content">
            <div id="left">
                content left <br /><br />
            </div>        
            <div id="right">
                content right
            </div>
            <div id="clear"></div>
        </div>
    </div>
</div>

如何确保#shadowbox-background 位于底部？

CSS：

* {
   margin: 0 auto;
   padding: 0;
   border: 0;
}
body {
    background-image: url('http://atrox.no-ip.org:8082/HIJW/images/bg.png');
    background-repeat: repeat;
}
#shadowbox {
    width: 1150px;
    min-height: 100%;
    background-image: url('http://atrox.no-ip.org:8082/HIJW/images/shadowbox.png');
    background-repeat: repeat-y;
}
#container {
    width: 1024px;
}
#header {
   height: 100px;
   background-color: red;
}
#banner {
    top: 100px;
    min-width: 1200px;
    height: 150px;
    margin-left: -100%;
    margin-right: -100%;
    background-color: blue;
}
#content {
    position: relative;
    width: 1000px;
    padding: 0;
    margin-top: 20px;
}
#left {
    float: left;
    width: 625px;
    background-color: green;
}
#right {
    float: right;
    width: 350px;
    background-color: green;
}
#clear {
    clear: both;
}
4

2 回答 2

2

min-height:100%从中删除#shadowbox并添加此 CSS ：

html, body, #shadowbox {
    height:100%;
}

检查这个JSFiddle

于 2013-09-24T11:33:03.073 回答
1

添加

html, body {
height: 100%;
}

到你的代码:)

于 2013-09-24T11:25:39.197 回答