1

HTML:

<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>
​&lt;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/

col高さを 100%にする方法を教えてください。

4

2 に答える 2

1

% は親に対する相対値であるため、列の外側のコンテナも 100% の高さになるように設定する必要があります。

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-15T21:01:53.097 に答える
-1

これには多くの方法があります: http://css-tricks.com/fluid-width-equal-height-columns/私はこれが好きです: 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://jsfiddle.net/Ya9RR/8/

于 2012-11-15T20:50:04.050 に答える