獨立滾動div，其中一個帶有固定頁眉和頁腳

我有兩個獨立滾動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>

看到這個小提琴：https://jsfiddle.net/bhmvv05n/

的問題是，我想第二個div容器有一個固定的頁眉和頁腳總是可見的並且只有內容滾動。

只要我改變滾動的col-2 DIV，兩列不再獨立滾動。

有什麼建議嗎？

謝謝！

來源

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，其中一個帶有固定頁眉和頁腳

回答

相關問題