html - この 2 列のレイアウトを取得する方法 (1 つはコンテンツに適合します)

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

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;
}

ワーキングフィドル（あなたの投稿に示されているように）