具有溢出和滾動汽車高度的div時

我試圖與一個頁面沒有垂直滾動一個網站，但我需要的DIV我必須垂直擴展到頁面底部的一個（最多），當它的內容不適合時，div應該創建一個垂直滾動條。具有溢出和滾動汽車高度的div時

我已經有了的css，裏面的this fiddle已經算出來了，在需要的時候創建了滾動條。我也計算出how to make容器div增長到佔據它在頁面中的垂直空間。我不能讓他們一起工作！

請記住，在jsfiddle中，您將無法查看整個網站的內容，從這個意義上說，第二小提琴得到的東西並不真正顯示正在做什麼，但它可以作爲我雖然打算。

只是另注：因爲它們是不同的小提琴，在第一小提琴的編號div容器是第二個例子，他的ID＃DIV dcontent。還有另一件事：對於一種內容，這個div將垂直滾動，但對於其他類型的內容，我希望它水平滾動，因爲它將有一個產品「滑塊」在此內部水平顯示元素DIV。

也請看看這張照片，因爲它可能會更容易明白我想說：PICTURE

我試圖尋找關於這些主題的其他問題，但似乎沒有涵蓋所有的方面我試圖解決......：S

如果還有別的東西我可以提供幫助你/我:)搞清楚，請讓我知道！

謝謝！

EDIT1：固定錯別字

EDIT2：用於解釋

來源

2012-04-14 Joum

好，長期的研究後，我發現了一個變通方法，做什麼，我需要： 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> 
</div>

可能不適合水平的東西，但是，這是一項正在進行的工作！

我基本上放棄了「初始」盒子 - 盒子裏面盒子模型，並使用具有動態高度和溢出屬性的固定位置。

希望這可以幫助任何人後來發現問題！

編輯：這是最終答案。

來源

2012-04-15 16:55:54 Joum

添加圖片試試這個：
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>

如果你不這樣做就像在這種情況下的絕對定位一樣，只需要玩無線讓父母和小孩分享這個，都與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>

來源

2012-04-15 02:52:31 preahkumpii

這工作正常與內部的*內*的*，它確實調整到可用的垂直空間ocuppy，但我沒有*增長*容器內，因爲我需要它... btw，我正在嘗試你的編輯...... 的事情是，你的第二個代碼示例中的父div是在我的代碼中的另一個容器內...檢查上面的圖片以獲取更清晰的描述... 有更多想法嗎？ – Joum 2012-04-15 15:31:50

yup ...不工作：S這裏是你的測試結果的小提琴：http://jsfiddle.net/CqB3d/紅色邊框div應該保持溢出在黑色條之間並顯示垂直滾動條。如果偶然的解決方案是不同的，只有紅色邊框的div應該*增長*來改變大小......我完全迷失在這裏：S不知道如果它的高度：自動設置，這使得這種行爲或如果它與div的內容有關... – Joum 2012-04-15 16:05:07

-5

我覺得這很容易。只要使用這個CSS

.content { 
    width: 100%; 
    height:(what u wanna give); 
    float: left; 
    position: fixed; 
    overflow: auto; 
    overflow-y: auto; 
    overflow-x: none; 
}

在此之後只是給這個類UR DIV就像 -

<div class="content">your stuff goes in...</div>

來源

2012-05-02 11:22:07

-1

這是我設法到目前爲止做的。我想這是你想要拉出的東西。唯一的問題是，我仍然無法爲容器DIV分配適當的高度。

- >JSFIDDLE

來源

2012-05-05 03:54:06

找不到jsfiddle鏈接。應該在你的回答中張貼代碼不只是鏈接 – 2016-09-02 18:06:01

快速解答與要點

幾乎相同的答案，從@Joum最好的選擇答案，加快中試圖達到的答案貼出你的追求問題並節省時間破譯什麼在語法回事 -

回答

將位置屬性設置爲固定，將頂部和底部屬性設置爲您希望與其父元素具有「自動」大小的元素或div相似的元素或div，然後將溢出設置爲隱藏。

.YourClass && || #YourId{ 
    position:fixed; 
    top:10px; 
    bottom:10px; 
    width:100%; //Do not forget width 
    overflow-y:auto; 
}

Wallah！這就是您需要的特殊元素，您希望根據屏幕大小和/或動態傳入內容獲得動態高度，同時保持滾動的機會。

來源

2016-05-09 18:54:30 MattOlivos

這是一個使用FlexBox的水平解決方案，無需討厭absolute定位。

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>

來源

2017-07-31 08:27:53 TranslucentCloud

我很驚訝，沒有人提到calc()呢。

我無法從你的小提琴中弄出你的具體情況，但我理解你的問題：你想要一個height: 100%容器，仍然可以使用overflow-y: auto。

這並不適用，因爲overflow需要一些硬編碼的大小約束來知道它何時應該開始處理溢出。所以，如果你使用height: 100px，它會按預期工作。

好消息是that calc() can help，但它不像height: 100%那麼簡單。

calc()允許您組合任意度量單位。

所以，你在圖片中所描述的情況，你有：

由於所有的上面和下面的粉紅色的div元素是一個已知的高度（比方說，在總高度200px），你可以使用calc確定OLE小指的高度：

height: calc(100vh - 200px);

或「高度是視圖高度減去200像素的100％。」

然後，overflow-y: auto應該像一個魅力。

來源

2017-08-18 22:08:29 Brandon

具有溢出和滾動汽車高度的div時

回答

相關問題