固定工具欄和它下面的div可以滾動

我的頁面按左右部分分開。每個零件都有其工具欄和工具欄下的內容。

我想讓工具欄修復，只有內容滾動。

但是，當我使內容{overflow：scroll}，太長的內容文本將在div之外。

當我使兩個部分{overflow：scroll}，兩個工具欄{position：fixed}，工具欄1的寬度將爲100％，覆蓋toolbar2。

p.s.此頁面使用JavaScript。一個是粘性頁腳，一個是如果主要內容的文本太短，它的div可以調整窗口大小。

.left { 
 
    float: left; 
 
    width: 20%; 
 
} 
 
.right { 
 
    float: right; 
 
    width: 80%; 
 
} 
 
.toolbar1 { 
 
    position: fixed; 
 
    background-color: red; 
 
} 
 
.toolbar2 { 
 
    position: fixed; 
 
    background-color: yellow; 
 
} 
 
.scroll { 
 
    overflow: scroll; 
 
} 
 
.clear { 
 
    clear: both; 
 
}

<div class="left"> 
 
    <div class="toolbar1">asdfgh</div> 
 
    <div class="scroll">1<br>1<br>1<br>1<br>1<br>1<br>1<br></div> 
 
</div> 
 
<div class="right"> 
 
    <div class="toolbar2">123123</div> 
 
    <div class="scroll">1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br></div> 
 
</div> 
 
<div class="clear"></div> 
 
<footer>footer</footer>

來源

2015-06-20 user5031585

一對夫婦的問題。

如果固定工具欄應該分別被固定在left和right容器，你應該給這些容器的display:relative風格，使瀏覽器知道什麼來解決工具欄。否則，即使容器的位置發生變化，工具欄也會固定在窗口中的相同位置。
儘管scroll divs有overflow:scroll，但這並不意味着它們將具有工作滾動條。 overflow屬性不會影響height屬性，因此div仍然與其內容高度相同。
由於工具欄是fixed，它們並不真正佔用容器中的空間，並且scroll div從頂部開始，這意味着scroll div將部分被工具欄隱藏。

現在，如果你真的想要的工具欄是fixed，一個可能的解決辦法是給予scroll div的頂部填充，所以他們的第一線不會隱藏工具欄的後面。

（請注意，在這個例子中，我也採取了限制scroll的div的高度的自由，讓他們真正滾動。）

.left { 
 
    float: left; 
 
    width: 20%; 
 
    position:relative; /* new */ 
 
} 
 
.right { 
 
    float: right; 
 
    width: 80%; 
 
    position:relative; /* new */ 
 
} 
 
.toolbar1 { 
 
    position: fixed; 
 
    background-color: red; 
 
} 
 
.toolbar2 { 
 
    position: fixed; 
 
    background-color: yellow; 
 
} 
 
.scroll { 
 
    overflow: scroll; 
 
    padding-top:1.25em; /* new */ 
 
    height:6em;   /* this just added for demonstration */ 
 
} 
 
.clear { 
 
    clear: both; 
 
}

<div class="left"> 
 
    <div class="toolbar1">asdfgh</div> 
 
    <div class="scroll">one<br>two<br>three<br>four<br>five<br>six<br>seven</div> 
 
</div> 
 
<div class="right"> 
 
    <div class="toolbar2">123123</div> 
 
    <div class="scroll">one<br>two<br>three<br>four<br>five<br>six<br>seven</div> 
 
</div> 
 
<div class="clear"></div> 
 
<footer>footer</footer>

剩下的事的工具欄不是其容器的整個寬度。你可以通過將它們的寬度分別設置爲20％和80％（與容器寬度相同）來解決這個問題。

但是，如果您正在嘗試做我認爲你是的，那麼根本就不需要工具欄的position:fixed。只要把它們放在頂部和他們下面的滾動div;這將簡化CSS而不會損失功能。
此外，工具欄將自動獲得容器的全部寬度，而不會溢出。順便說一下，如果你永遠不需要水平滾動，你最好將overflow更改爲overflow-y。這樣，你只會得到垂直滾動條。但這取決於你。

.left { 
 
    float: left; 
 
    width: 20%; 
 
} 
 
.right { 
 
    float: right; 
 
    width: 80%; 
 
} 
 
.toolbar1 { 
 
    background-color: red; 
 
} 
 
.toolbar2 { 
 
    background-color: yellow; 
 
} 
 
.scroll { 
 
    overflow: scroll; 
 
    height:6em;   /* again, added for demonstration */ 
 
} 
 
.clear { 
 
    clear: both; 
 
}

<div class="left"> 
 
    <div class="toolbar1">asdfgh</div> 
 
    <div class="scroll">one<br>two<br>three<br>four<br>five<br>six<br>seven</div> 
 
</div> 
 
<div class="right"> 
 
    <div class="toolbar2">123123</div> 
 
    <div class="scroll">one<br>two<br>three<br>four<br>five<br>six<br>seven</div> 
 
</div> 
 
<div class="clear"></div> 
 
<footer>footer</footer>

來源

2015-10-24 07:37:22

固定工具欄和它下面的div可以滾動

回答

相關問題