独立したスクロールdiv、固定ヘッダーとフッターを持つもの

私は2つの独立したスクロールdivを持っています.1つはヘッダとフッタです。 https://jsfiddle.net/bhmvv05n/独立したスクロールdiv、固定ヘッダーとフッターを持つもの

問題がある、私は常に表示され、スクロール可能なコンテンツのみを持っている固定ヘッダーとフッターを持っている第二の容器のdiv要素が欲しい：

<body> 
    <div class="container col-1"> 
    Many listings 
    </div> 
    <div class="container col-2"> 
    <div class="header">Fixed Header</div> 
    <div class="content">Lots of content</div> 
    <div class="footer">Fixed footer</div> 
    </div> 
</body>

このフィドルを参照してください。

col-2 divのスクロールを変更すると、2つの列はそれ以上独立してスクロールしません。

アドバイスはありますか？

ありがとうございます！

出典

2016-05-23 ebbishop

これは、あなたの列を持っているものは何でもwidthに調整されます。考えてみましょう。.col-2.contentは全部ではなく、.containerにしかスクロールできません。

* { 
    box-sizing: border-box; 
} 

html, body { 
    margin: 0; 
    height: 100%; 
} 

.container { 
    height: 100%; 
} 

.col-1{ 
    float: left; 
    width: 33%; 
    overflow: auto; 
} 

.col-2{ 
    float: left; 
    width: 67%; 
    position: relative; 
} 

.col-2 .content { 
    position: absolute; 
    left: 0; right: 0; 
    top: 20px; /* header height */ 
    bottom: 20px; /* footer height */ 
    overflow: auto; 
} 

.header, .footer { 
    height: 20px; 
    background-color: red; 
    position: absolute; 
    left: 0; right: 0; 
} 

.header { 
    top: 0; 
} 

.footer { 
    bottom: 0; 
}

出典

2016-05-23 19:23:00 victmo

この作品のようなものはありますか？

https://jsfiddle.net/vz7eb8uc/

コードが変更されました。

.col-1{ 
    float: left; 
    width: 33%; 
    position: relative; 

} 
.col-2{ 
    float: left; 
    width: 67%; 
    position: relative; 
} 
.header, .footer { 
    height: 20px; 
    background-color: red; 
    position: fixed; 
    left: 33%; 
    width:67% 
}

出典

2016-05-23 19:14:51 since095

独立したスクロールdiv、固定ヘッダーとフッターを持つもの

答えて

関連する問題