开发者

css height-related question

问答 作者：

This is more of a request for an explanation as to help solving a problem... in setting up the layout for a site, I had been setting the background colours of all of my div's so that I could see where each one was being displayed, etc.. just for getting the basic shell setup.

I noticed at one point however that although the content in my footer div displayed in the right spot, the background colour was displaying much higher than it and was displaying behind some boxed content that appears above the footer. The background colour of my 'boxes' div, which contained 3 horizontal boxes, was not displaying at all, and the footer colour was showing where the boxes colour should have. I had always thought that since I hadn't specified a height for boxes, it would stretch to the height of the 3 horizontal boxes which were placed inside it....but apparently this isn't the case. As soon as I set my 'boxes' div to have a height the same as the horizontal boxes, the colour showed up properly and pushed the footer down to the correct place.

Can someone please explain to me why this happens? And why I had to specify the height of 'boxes' in order for the background colour for it to be displayed, and why it didn't just stretch to the height of the horizontal boxes contained within it?

Here are some jsFiddle links to see the differences (I've also include the actual code below as well if useful). Note that the 'boxes' background colour I want to see is black..footer is red.

Without height specified and footer (red) coming up too high: http://jsfiddle.net/KgFKH/

With height specified and displaying properly: http://jsfiddle.net/eD4d7/

I apologize if its a stupid question, I had just always thought that the container div would stretch to the height of the elements within it...so I am finding this very puzzling!

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> 
</head>


<body>


    <div id="header-stretch">
        <div id="header" class="container">
            <h2>THIS IS THE HEADER</h2> 
            <p>nav<br />will<br />go</br >here
        </div><!--header-->
    </div><!--header stretch-->

    <div id="slider-stretch">
        <div id="slider" class="container">
            <p>Slider will go here...</p>
        </div><!--slid开发者_StackOverflower-->
    </div><!--slider stretch -->

    <div id="main-stretch">
        <div id="main" class="container">
            <p>Main block of content will be in here.</p>
        </div><!--main container-->
    </div><!--main stretch-->

    <div id="boxes-stretch">
    <div id="boxes" class="container">
        <div class="box" id="box1">
            <h2>Box 1 Heading</h2>
            <p>Box 1 content here...</p>
            <p class="c2action"><a href="#">learn more</a></p>
        </div><!--box1-->

        <div class="box" id="box2">
            <h2>Box 2 Heading</h2>
            <p>Box 2 <br />content here...</p>
            <p class="c2action"><a href="#">learn more</a></p>
        </div><!--box2-->

        <div class="box" id="box3">
            <h2>Box 3 Heading</h2>
            <p>Box 3<br /> content <br />here...</p>
            <p class="c2action"><a href="#">Click here for Map &amp; Directions</a></p>
        </div><!--box3-->
    </div><!--boxes-->
    </div><!--boxes-stretch-->

    <div id="footer-stretch">
        <div id="footer" class="container">
            <p>&copy; Footer</p>
        </div><!--footer-->
    </div><!--footer stretch-->

</body>

css (w/o height declared):

html, body, div, span, applet, object, iframe,  
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
del, dfn, em, font, img, ins, kbd, q, s, samp,  
small, strike, strong, sub, sup, tt, var,  
b, u, i, center,  
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td {  
    margin: 0;  
    padding: 0;  
    border: 0;  
    outline: 0;  
    font-size: 100%;  
    vertical-align: baseline;  
    background: transparent;  
}  

body {background: #FFFFFF; font-family: Arial, verdana, sans-serif;}

.container {margin: 0 auto; width: 940px;}

#header-stretch{background:#ffff00;}

#header {overflow: hidden; padding-bottom: 10px;}

#header h1 a {
    background: url("images/logo.gif") no-repeat;
    float: left;
    height: 37px;
    width: 191px;
    margin-top: 40px;
    text-indent: -9999px;
}

#header ul{
    float: right;
    list-style: none;
    margin-top: 50px;
}

#header ul li{
    float: left;
    margin-left: 10px;
    padding: 10px 0 10px 12px;
}

#header ul li a {
    text-decoration: none;
    font-size: 17px;
    padding: 10px 0px 10px 2px;
    color:#878686;
}

#slider-stretch{
    background-color:#9900ff;
}

#slider{
    background-color:#00FF00;
    height: 260px;
}

#main-stretch{
    background-color:#3c0303;
    height: 170px;
}

#main{
    padding:15px 0px;
}

#main p{
    padding-top:15px;
    color:#FFFFFF;
}

#boxes-stretch{
    background-color:#0000FF;

}

#boxes{
    margin-top: 20px;
    background-color:#000000;

}

.box{
    position:relative;
    width:296px;
    height:270px;
    float:left;
    background-color:#999999;

}

.box h2{
    font-size: 16px;
    margin-top: 18px;
    margin-left: 24px;
    color: #353535; 
}

.box img{
    margin-top: 10px;
    margin-left: 24px;
}

.box p{
    margin-top: 10px;
    margin-left: 24px;
    width: 252px;
    font-size:13px;
    color:#525151;
}

p.c2action{
    position:absolute;
    bottom:10px;
    text-align:right;
    font-size: 14px;
}

.c2action a{
    color:#353535;
}


#box1{  
    margin-right: 20px;
}

#box2{
    margin-right: 20px;
}


#footer-stretch{
    background-color:#ff0000;
}

#footer{
    padding-top:10px;
    padding-bottom:10px;
    font-size: 11px;
    color:#7e7e7e;
    overflow:hidden;
}

#footer p {
    text-align: center;
}

css (w/ height declared):

html, body, div, span, applet, object, iframe,  
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
del, dfn, em, font, img, ins, kbd, q, s, samp,  
small, strike, strong, sub, sup, tt, var,  
b, u, i, center,  
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td {  
    margin: 0;  
    padding: 0;  
    border: 0;  
    outline: 0;  
    font-size: 100%;  
    vertical-align: baseline;  
    background: transparent;  
}  

body {background: #FFFFFF; font-family: Arial, verdana, sans-serif;}

.container {margin: 0 auto; width: 940px;}

#header-stretch{background:#ffff00;}

#header {overflow: hidden; padding-bottom: 10px;}

#header h1 a {
    background: url("images/logo.gif") no-repeat;
    float: left;
    height: 37px;
    width: 191px;
    margin-top: 40px;
    text-indent: -9999px;
}

#header ul{
    float: right;
    list-style: none;
    margin-top: 50px;
}

#header ul li{
    float: left;
    margin-left: 10px;
    padding: 10px 0 10px 12px;
}

#header ul li a {
    text-decoration: none;
    font-size: 17px;
    padding: 10px 0px 10px 2px;
    color:#878686;
}

#slider-stretch{
    background-color:#9900ff;
}

#slider{
    background-color:#00FF00;
    height: 260px;
}

#main-stretch{
    background-color:#3c0303;
    height: 170px;
}

#main{
    padding:15px 0px;
}

#main p{
    padding-top:15px;
    color:#FFFFFF;
}

#boxes-stretch{
    background-color:#0000FF;

}

#boxes{
    margin-top: 20px;
    background-color:#000000;
    height:270px;
}

.box{
    position:relative;
    width:296px;
    height:270px;
    float:left;
    background-color:#999999;

}

.box h2{
    font-size: 16px;
    margin-top: 18px;
    margin-left: 24px;
    color: #353535; 
}

.box img{
    margin-top: 10px;
    margin-left: 24px;
}

.box p{
    margin-top: 10px;
    margin-left: 24px;
    width: 252px;
    font-size:13px;
    color:#525151;
}

p.c2action{
    position:absolute;
    bottom:10px;
    text-align:right;
    font-size: 14px;
}

.c2action a{
    color:#353535;
}


#box1{  
    margin-right: 20px;
}

#box2{
    margin-right: 20px;
}


#footer-stretch{
    background-color:#ff0000;
}

#footer{
    padding-top:10px;
    padding-bottom:10px;
    font-size: 11px;
    color:#7e7e7e;
    overflow:hidden;
}

#footer p {
    text-align: center;
}

You're not containing (or clearing) the floated boxes. There are a number of methods to do so, one way is to use overflow: hidden on the container that holds to floats (do not also set an explicit height on this container):

http://jsfiddle.net/KgFKH/1/

You could also add an empty div below the floats that has clear; both.

继续阅读：css

更多精彩内容

0

上一篇:

下一篇:

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

最新问答

问答排行榜

法律声明：本站内容均为网友上传，网站举办方负责审核和监督，

如存在版权或非法内容，欢迎举报，我们将尽快予以删除。

Copyright © 2018-2020 开发者. All rights reserved.

Powered by 开发者

ICP备案号： 京ICP备10032868号-9