100 % 신장 열

HTML :100 % 신장 열

<div id="header"> 
    &nbsp; 
</div> 
<div id="wrapper"> 
    <div id="col1"> 
     Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/> 
    </div> 
    <div id="col2"> 
     &nbsp; 
    </div> 
    <div id="col3"> 
     Lorem Ipsum<br/>Lorem Ipsum 
    </div> 
</div> 
<div id="footer"> 
    &nbsp; 
</div>

CSS :

#header{background:#aaa;height:100px} 
#wrapper{background:#000;float:left} 
#col1{background:#f00;float:left;width:300px} 
#col2{background:#0f0;float:left;width:5px;height:100%} /* DOESN'T WORK */ 
#col3{background:#ff0;float:left;width:300px} 
#footer{background:#aaa;height:100px;clear:both}

JSFiddle : http://jsfiddle.net/Ya9RR/16/

가 어떻게 100 % 높이를 가지도록 col 중 하나를해야합니까?

출처

2012-11-15 Elmo

가 왜 300 픽셀에 높이를 설정할 수 없습니다? – Chad

신장은 유연합니다. 콘텐츠는 CMS에 의해 생성되기 때문입니다. – Elmo

그런 경우, 나는 그것이 순수 CSS로 가능하다는 것을 모른다. 그러나 가장 큰 열의 높이를 끌어 와서이 세 가지 모두에 적용하는 간단한 스크립트를 작성할 수 있습니다. – Chad

-1

이 일을 여러 가지 방법이 있습니다 : http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

#col1, #col2, #col3 { 
    min-height: 300px; 
    display: -moz-inline-stack; 
    display: inline-block; 
    vertical-align: top; 
    zoom: 1; 
    *display: inline; 
    _height: 300px; 
}

업데이트 바이올린 : http://css-tricks.com/fluid-width-equal-height-columns/ 내가이 같은 http://jsfiddle.net/Ya9RR/8/ 또한 100 %을 차지하기 위해 열의 외부 용기를 설정해야

출처

2012-11-15 20:50:04 coopersita

높이가 300px가 아니고 100 %로 설정됩니다. – Elmo

죄송합니다. 질문에 대한 오해를했습니다. 가장 긴 것을 기준으로 3 열이 같은 크기가 되길 바랬다 고 생각했습니다. 다른 대답을 시도 했습니까? 그가 추가 한 바이올린은 당신이 원하는 것을하는 것처럼 보입니다. – coopersita

높이 (%)는 부모를 기준으로합니다.

HTML :

<html> 
<body> 
<div id="wrapper"> 
    <div id="col1"> 
     Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/> 
    </div> 
    <div id="col2"> 
     &nbsp; 
    </div> 
    <div id="col3"> 
     Lorem Ipsum<br/>Lorem Ipsum 
    </div> 
</div> 
</body> 
</html>

CSS :

body, html {height: 100%;} 
#wrapper{background:#000;float:left; height: 100%;} 
#col1{background:#f00;float:left;width:300px;height:100%} 
#col2{background:#0f0;float:left;width:5px;height:100%} 
#col3{background:#ff0;float:left;width:300px;height:100%}

바이올린 : http://jsfiddle.net/Ya9RR/14/

출처

2012-11-15 21:01:53

100 % 신장 열

답변

관련 문제