与css高度相关的问题

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

但我注意到，虽然我的页脚div中的内容显示在正确的位置，但背景颜色显示得比它高得多，并且显示在页脚上方显示的一些盒装内容的后面。包含3个水平框的我'盒子'div的背景颜色根本不显示，并且页脚颜色显示框颜色应该有的位置。我一直认为，因为我没有指定箱子的高度，它会延伸到放置在箱子内的3个水平箱子的高度......但显然情况并非如此。只要我将“盒子”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（W/O高度声明）：

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 /高度声明）：

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

来源

2011-09-05 Mark

你”不包含（或清除）浮动框。有许多的方法来做到这一点，一个办法是持有到浮动（不还设置明确的高度此容器上）在容器上使用overflow: hidden：

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

您还可以添加空的div下面浮动有clear; both。

来源

2011-09-05 20:34:09 steveax

啊，明白了 - 谢谢！ – Mark

与css高度相关的问题

回答

相关问题