0

これらの空の div は、fluid div と同じ高さにしたいと考えています。

http://jsfiddle.net/QLdZs/

html:

<div id="container">
    <div class="buffer"></div>
    <div class="buffer"></div>
    <div class="buffer"></div>
    <div id="content">
        this is content<br/>
        lalala<br/>
        lala<br/>
        lala<br/>
        lalalalala lala la<br/>
        o sole mio<br/>
    </div>
 </div>

CSS:

#container {
 overflow:hidden;   
}
.buffer {
    float:left;
    background-color:red;
    width:100px;
    min-height:10px;
    border-right:1px solid white;
 }
#content {
    overflow:hidden;
    background-color:green;
}

#container {position:relative;}を作成してから設定できることはわかって.buffer {position:absolute;height:100%;}いますが、これらすべてのバッファの位置を個別に設定し、margin を#contentdiv に設定する必要があります。バッファが 2 つ、3 つある場合もあれば、まったくない場合もあります。したがって、これは最善の方法ではありません。

どうすればこれを行うことができますか？

4

1 に答える 1

1

この記事をチェックしてください、私はそれがあなたが必要としているものだと思います：http: //matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

でも、普段は固定の高さを使っていました。

記事からの引用：

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

そしてCSS

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}
于 2013-02-08T21:51:36.840 に答える