我正在嘗試制作一個沒有頁面垂直滾動的網站，但我需要一個我必須垂直擴展到頁面底部的div(最多)，當它有不適合的內容時，div應該創建一個垂直滾動條。
我已經為div內部設計了css，在需要的時候創建滾動條。我還想出了如何讓容器div增長到正好占據它在頁面中的垂直空間。我就是不能讓他們在一起工作！
請記住，在jsfiddle中，你將無法查看整個網站的內容，從這個意義上說，你從第二把小提琴中得到的東西并不能真正顯示正在做什么，但它的工作正如我所想的那樣。
另一個注意:因為它們是不同的提琴，第一提琴中的id#container div是第二個例子中的id#dcontent div。
還有一件事:對于一種類型的內容，這個div將垂直滾動，但對于其他類型的內容，我希望它水平滾動，因為它將有一個產品“滑塊”在這個DIV內水平顯示元素。
也請看看這張照片，因為它可能更容易理解我想說什么:圖片
我試圖尋找關于這些話題的其他問題，但似乎沒有一個問題涵蓋了我試圖解決的所有方面...:S
如果還有什么我可以幫你/我的:)弄清楚了，請告訴我！
謝謝！
第1版:修復了錯別字
第二版:增加了解釋圖片
# # #我很驚訝還沒有人提到calc()。
我無法從你的小提琴中看出你的具體情況，但我理解你的問題:你想要一個高度:100%的容器，仍然可以使用overflow-y: auto。
這不是現成的，因為溢出需要一些硬編碼的大小約束來知道何時應該開始處理溢出。所以，如果你用高度:100像素，它會像預期的那樣工作。
好消息是calc()可以有所幫助，但不是身高這么簡單:100%。
calc()允許您組合任意的度量單位。
因此，對于您在圖片中描述的情況，您包括:
由于粉色div上方和下方的所有元素的高度都是已知的(假設總高度為200px)，您可以使用calc來確定ole pinky的高度:
高度:calc(100 VH-200 px)；
或者，“高度是視圖高度的100%減去200像素。”
然后，overflow-y: auto應該像魔咒一樣工作。
# # #嗯，經過長時間的研究，我找到了一個可以滿足我需要的解決方法: http://jsfiddle.net/CqB3d/25/
CSS:
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#caixa{
width: 800px;
margin-left: auto;
margin-right: auto;
}
#framecontentTop, #framecontentBottom{
position: absolute;
top: 0;
width: 800px;
height: 100px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#framecontentBottom{
top: auto;
bottom: 0;
height: 110px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#maincontent{
position: fixed;
top: 100px; /*Set top value to HeightOfTopFrameDiv*/
margin-left:auto;
margin-right: auto;
bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background: #fff;
width: 800px;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 800px;
}HTML:
<div id="framecontentBottom">
<div class="innertube">
<h3>Sample text here</h3>
</div>
</div>
<div id="maincontent">
<div class="innertube">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, ligula hendrerit euismod auctor, diam nunc sollicitudin nibh, id luctus eros nibh porta tellus. Phasellus sed suscipit dolor. Quisque at mi dolor, eu fermentum turpis. Nunc posuere venenatis est, in sagittis nulla consectetur eget... //much longer text...
</div>
</div>可能還不能與水平的東西一起工作，但是，這是一項正在進行中的工作！
我基本上放棄了“inception”的盒中盒中盒模型，使用了具有動態高度和溢出屬性的固定定位。
希望這對以后發現問題的人有所幫助！
編輯:這是最終答案。
# # #快速回答要點
與來自@Joum的最佳選擇答案幾乎相同的答案，以加快你的探索，嘗試獲得張貼問題的答案，并節省破譯語法的時間-
回答
將position屬性設置為fixed，將top和bottom屬性設置為您喜歡的元素或div的大小(與其父元素相比),然后將overflow設置為hidden。
.YourClass && || #YourId{
position:fixed;
top:10px;
bottom:10px;
width:100%; //Do not forget width
overflow-y:auto;
}瓦拉！這就是你所需要的特殊元素，你想有一個動態的高度根據屏幕大小和/或動態傳入的內容，同時保持滾動的機會。
# # #您只能使用flexboxes和溢出屬性來完成此操作。
即使父母的身高也被計算。
詳情請看本回答或JSFiddle。
# # #試試這個: CSS:
#content {
margin: 0 auto;
border: 1px solid red;
width:800px;
position:absolute;
bottom:0px;
top:0px;
overflow:auto
}HTML:
<body>
<div id="content">
...content goes here...
</div>
<body>如果在這種情況下你不喜歡絕對定位，你可以做一個父div和子div，兩者都帶有position:relative。
編輯:下面應該可以了(目前我只是把css放在內聯):
<div style="margin:0 auto; width:800px; height:100%; overflow:hidden">
<div style="border: 1px solid red; width:800px; position:absolute; bottom:0px; top:0px; overflow:auto">
...content goes here...
</div>
</div># # #這是一個使用FlexBox的水平解決方案，沒有煩人的絕對定位。
body {
height: 100vh;
margin: 0;
display: flex;
flex-direction: row;
}
#left,
#right {
flex-grow: 1;
}
#left {
background-color: lightgrey;
flex-basis: 33%;
flex-shrink: 0;
}
#right {
background-color: aliceblue;
display: flex;
flex-direction: row;
flex-basis: 66%;
overflow: scroll; /* other browsers */
overflow: overlay; /* Chrome */
}
.item {
width: 150px;
background-color: darkseagreen;
flex-shrink: 0;
margin-left: 10px;
}<html>
<body>
<section id="left"></section>
<section id="right">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</section>
</body>
</html># # #這是我目前為止設法做到的。我想這就是你想要的。唯一的問題是，我仍然無法給容器DIV分配合適的高度。
JSFIDDLE
HTML:
<div id="container">
<div id="header">HEADER</div>
<div id="fixeddiv-top">FIXED DIV (TOP)</div>
<div id="content-container">
<div id="content">CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT</div>
</div>
<div id="fixeddiv-bottom">FIXED DIV (BOTTOM)</div>
</div>和CSS:
html {
height:100%;
}
body {
height:100%;
margin:0;
padding:0;
}
#container {
width:600px;
height:50%;
text-align:center;
display:block;
position:relative;
}
#header {
background:#069;
text-align:center;
width:100%;
height:80px;
}
#fixeddiv-top {
background:#AAA;
text-align:center;
width:100%;
height:20px;
}
#content-container {
height:100%;
}
#content {
text-align:center;
height:100%;
background:#F00;
margin:0 auto;
overflow:auto;
}
#fixeddiv-bottom {
background:#AAA;
text-align:center;
width:100%;
height:20px;
}###
$(document).ready(function() {
//Fix dropdown-menu box size upto 2 items but above 2 items scroll the menu box
$("#dropdown").click(function() {
var maxHeight = 301;
if ($(".dropdown-menu").height() > maxHeight) {
maxHeight = 302;
$(".dropdown-menu").height(maxHeight);
$(".dropdown-menu").css({'overflow-y':'scroll'});
} else {
$(".dropdown-menu").height();
$(".dropdown-menu").css({'overflow-y':'hidden'});
}
});
});# # #我覺得這個應該也行。的。當div內容呈現超過max-height值時，內容div將只顯示滾動條。
# # #我覺得挺簡單的。就用這個css
.content {
width: 100%;
height:(what u wanna give);
float: left;
position: fixed;
overflow: auto;
overflow-y: auto;
overflow-x: none;
}然后把這個類交給你的部門，就像-
<div class="content">your stuff goes in...</div>