简体   繁体   English

将div中的空格扩展到页面底部

[英]Extending whitespace in div to bottom of page

I'm working on my website that I need to be screenfilling in height. 我正在我的网站上工作,我需要进行高度填充。 It exists of header-banner-content within a container. 它在容器中存在header-banner-content。

The container itself is within another div (shadowbox) who is a bit wider because there is a fade out/shadow-effect. 容器本身位于另一个div(阴影框)内,该div稍宽一些,因为存在淡出/阴影效果。 Therefore shadowbox is 1150px width and container only 1024px. 因此,shadowbox的宽度为1150px,容器的宽度仅为1024px。

Maybe it is a better way to suppress the inner div and work width a left and right padding but I find it better to work without the padding. 也许这是抑制内部div和左右宽度的更好的方法,但是我发现不使用这种方法更好。

This is my fiddle: 这是我的小提琴:

http://jsfiddle.net/Bartimi/REpTA/ 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>

How can I make sure the #shadowbox-background goes to the bottom? 如何确定#shadowbox-background到达底部?

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

Remove min-height:100% from #shadowbox and add this CSS : #shadowbox删除min-height:100%并添加以下CSS:

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

Check this JSFiddle 检查这个JSFiddle

Add

html, body {
height: 100%;
}

to your code :) 到你的代码:)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM