Question

这更像是一个解释请求，以帮助解决问题...在设置网站的布局时，我一直在设置所有div的背景颜色，以便我可以看到每个正在显示等等。只是为了获得基本的shell设置。

然而，我注意到虽然我的页脚div中的内容显示在正确的位置，但是背景颜色显示得比它高很多，并且显示在页脚上方显示的一些盒装内容后面。我的'盒'div的背景颜色，包含3个水平框，根本没有显示，页脚颜色显示框颜色应该有的位置。我一直以为，由于我没有指定箱子的高度，它会伸展到放在里面的3个水平箱子的高度......但显然事实并非如此。只要我将'boxes'div设置为与水平框相同的高度，颜色就会正确显示并将页脚向下推到正确的位置。

有人可以向我解释为什么会这样吗？为什么我必须指定“盒子”的高度以便显示它的背景颜色，以及为什么它不只是拉伸到其中包含的水平盒子的高度？

以下是一些用于查看差异的jsFiddle链接（如果有用，我还包括下面的实际代码）。请注意，我想看到的“盒子”背景颜色是黑色..脚是红色的。

未指定高度且页脚（红色）过高：http://jsfiddle.net/KgFKH/

指定高度并正确显示：http://jsfiddle.net/eD4d7/

我道歉，如果它是一个愚蠢的问题，我一直以为容器div会延伸到其中元素的高度......所以我发现这非常令人费解！

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><!--slider-->
    </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（没有声明身高）：

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（宣布身高）：

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

Answer 1

您没有包含（或清除）浮动框。有很多方法可以做到这一点，一种方法是在容纳浮点数的容器上使用overflow: hidden（不要在此容器上设置显式高度）：

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

您还可以在具有clear; both的浮动广告下方添加空div。

css身高相关的问题

1 个答案: