CSS 높이 관련 질문

이것은 문제 해결에 도움이되는 설명 요청에 더 가깝습니다 ... 사이트 레이아웃을 설정할 때 모든 div의 배경색을 설정하여 각각이 표시되는 곳을 볼 수 있습니다. 기본 셸 설정을 얻는 것입니다.CSS 높이 관련 질문

그러나 보더 div의 내용이 올바른 위치에 표시되었지만 배경색이 훨씬 높게 표시되어 바닥 글 위에 나타나는 박스형 내용 뒤에 표시되는 경우가 있습니다. 3 개의 가로 상자가 포함 된 'boxes'div의 배경색은 전혀 표시되지 않았으며 바닥 글 색상은 상자 색상이 가져야하는 위치를 표시하고있었습니다. 나는 상자의 높이를 지정하지 않았기 때문에 상자 안쪽에 놓인 3 개의 가로 상자의 높이까지 늘릴 것이라고 생각했습니다. 그러나 분명히 그렇지 않습니다. 내 'boxes'div를 가로 상자와 같은 높이로 설정하자마자 색상이 제대로 나타나서 바닥 글을 올바른 위치로 밀었습니다.

이 문제가 발생하는 이유를 누군가 나에게 설명해 주시겠습니까? 그리고 왜 상자의 높이를 지정해야만 배경색을 표시 할 수 있으며 왜 그 안에 들어있는 가로 상자의 높이까지 늘어나지 않았습니까?

다음은 차이점을 확인할 수있는 jsFiddle 링크입니다 (유용 할 경우 실제 코드도 포함 시켰습니다). 내가보고 싶은 '상자'배경색이 검은 색이고 발목이 빨간색이라는 점에 유의하십시오. 높이 지정 제대로 표시와 http://jsfiddle.net/KgFKH/

: 높이 지정 및 바닥 글 (빨간색) 너무 높이 올라오고없이

은 http://jsfiddle.net/eD4d7/

내가 사과는 경우 바보 같은 질문은, 난 그냥 항상 용기 있다고 생각했다 div는 그 안에있는 요소의 높이까지 늘어납니다 ... 그래서 나는 이것을 매우 당혹스럽게 생각합니다!

HTML : (/ 높이 O를 선언 W)

<!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 (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

당신 ' 떠 다니는 상자를 포함하지 않거나 지우지 마십시오.

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

당신은 또한을 추가 할 수 있습니다 이렇게하는 방법은 여러 가지가있다, 하나의 방법은 수레에 보유 (이 컨테이너에 명시 적으로 높이를 설정하지 않음) 용기에 overflow: hidden를 사용하는 것입니다 clear; both 인 수레 아래 빈 div.

출처

2011-09-05 20:34:09 steveax

아, 알겠습니다 - 고마워요! – Mark

CSS 높이 관련 질문

답변

관련 문제