html - 如何获得这 2 列布局（适合内容）

Question

请注意

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

谢谢！

Answer 1

像这样

演示1

演示1 CSS

 html, body {
    height:100%;
}
header{
    width: 100%;
    background: yellow;
    position: fixed; 
    top: 0;
    height: 60px !important;
    opacity:.8;
}

.content {
    position:relative;
    height: 100%;
    /*width:600px;  Sizing - any length */
    padding:60px 0 30px 0; /* Header height and footer height */
    margin:0 auto 0 auto; /* Center content */
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

.sidebar1, .sidebar2 {
    background: red;
    top:60px;
    bottom:30px;
    width: 70%;
    position:absolute;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    overflow-y:scroll;
}

.sidebar1 {

  left:0;
    width:30%;

}

.sidebar2 {
  right: 0;
}

#scrollable2 {
  background:green;
  height: 100%;
  min-width: 300px;
  margin-left: 100px;
  margin-right: 100px;
    overflow:auto;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

footer {
    width: 100%;
    background: yellow;
    position: fixed; 
    bottom: 0;
    height: 30px;
}

演示2

Answer 2

这是一种仅使用 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/

这是如何工作的

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

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

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

最后，overflow-y: auto用于滚动条。（您也可以使用滚动值。）

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

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

你想设置一个最小宽度，#pageWrapper以防止布局缩小到没有用处的东西。

Answer 3

HTML

<div class="main">
    <div class="header"></div>
    <div class="mid">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>
</div>

CSS

body, html {
    width: 100%;
    height: 100%;
    background-color: black;
    padding: 0;
    margin: 0;
}
.main {
    background-color: white;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
}
.main, .header, .left, .right, .mid, .footer {
    position: absolute;
}
.header {
    height: 100px;
    top: 0px;
    left: 0px;
    right: 0px;
    border-bottom: 4px solid black;
}
.mid {
    top: 104px;
    left: 0px;
    right: 0px;
    bottom: 14px;
}
.left {
    overflow-y:auto;
    width: 100px;
    top: 0px;
    bottom: 0px;
}
.right {
    overflow-y:auto;
    top: 0px;
    bottom: 0px;
    left: 100px;
    right: 0px;
    border-left: 4px solid black;
}
.footer {
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 10px;
    border-top: 4px solid black;
}

Working Fiddle (as shown in your post)