html - 如何获得这 2 列布局(一个适合内容)

Question

请注意

• 垂直滚动条应在需要时显示
• 左列适合宽度
• 右栏占据剩余空间

Answer 1

这是一种仅使用 CSS 的方法。

HTML 看起来像:

<div id="pageWrapper">
    <header>Header</header>
    <div id="contentWrapper">
        <div class="table-wrap">
            <div class="cell col1">
                <div class="content">Column 1: Shrink-to-Fit Width</div>
            </div>
            <div class="cell col2">
                <div class="content">Column 2: Variable Width</div>
            </div>
        </div>
    </div>
    <div id="footerWrapper">Footer</div>
</div>

和CSS:

html, body {
    height: 100%;
    margin: 0;
}
body {
    background-color: #E3E3E3;
}
#pageWrapper {
    margin: 0 auto;
    position: relative;
    width: 90%; /*set to 100% or smaller or fixed width... */
    height: 100%;
}
header {
    display:block;
    width: 100%;
    height: 100px;
    background: yellow;
}
#contentWrapper {
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 100px;
    left: 0;
    background: beige;
}
#footerWrapper {
    width: 100%;
    position: absolute;
    height: 100px;
    bottom: 0px;
    left: 0;
    background: gray;
}
.table-wrap {
    width: 100%;
    height: 100%;
}
.table-wrap .cell {
    height: 100%;
}
.table-wrap .col1 {
    float: left;
    border: 1px dotted blue;
    max-width: 80%; /* This is critical or else Column 2 can disappear */
}
.table-wrap .col1 .content {
    height: inherit;
    display: inline-block;
    overflow-y: auto;
}
.table-wrap .col2 {

}
.table-wrap .col2 .content {
    height: inherit;
    overflow-y: auto;
}

参见演示:http://jsfiddle.net/audetwebdesign/kbAwf/

这是如何运作的

使用绝对定位将页眉、主要内容区域和页脚放置在视口(viewport)区域内。

在内容区域 (#contentWrapper) 中，.table-wrap 容器有两个单元格，其中一个向左浮动(第 1 列)。这允许第 2 列填充其余宽度。

要获得第 1 列的收缩以适合宽度，请将 display: inline-block 设置为内部 .content 容器。

最后，对滚动条使用 overflow-y: auto。 (您也可以使用滚动值。)

您需要为 .col1 设置最大宽度，这样 .col2 就不会被推出视口(viewport)。我将其设置为 80%，但您可以调整它。

另请注意，内联 block 将尽可能扩展以使其内容流动，这就是您需要对其进行约束的原因。

你想在 #pageWrapper 上设置最小宽度，以防止布局缩小到无用的东西。