Question

我想使用简单的布局，侧边栏，下边栏和主要内容，所有列的高度都必须相同。这是当我得到stuk时，如果列是空的，则列需要是最小屏幕高度，如果1列具有元素/内容，则其他列需要具有相同的高度。

//想法

<div id="container">

    needs to be min-heigth 100%

    <div id="sidebar">

        needs to be 40px width

    </div>
    <div id="subsidebar">

        needs to be 200px width

    </div>
    <div id="content">

        needs to be 100% width
        <div class="some-element-is-3000">
            3000px height(example)
        </div>
    </div>
</div>

Answer 1

尝试使用以下小提琴。它使用display:table;和display:table-cell;：

<强> CSS

html,body,#container{
    width:100%;
    height:100%;
}
#container{
    display:table;
}
#sidebar,#subsidebar,#content{
    border:1px solid black;
    display:table-cell;
}
#sidebar{
    min-width:40px;
}
#subsidebar{
    min-width:200px;
}
#content{
    width:100%;
}

摆弄所有三个内容较少的div Fiddle
内容div超出窗口高度 Fiddle

3列布局的高度必须相等

1 个答案: