有一個固定的位置div，需要滾動，如果內容溢出

我實際上有兩個問題，但讓我們先解決主要問題，因爲我相信其他更容易解決。有一個固定的位置div，需要滾動，如果內容溢出

我有一個菜單的滾動左側的固定位置股利。右側是正確滾動的標準div。問題是，當瀏覽器的視圖端口太小，看不到整個菜單..沒有辦法讓它滾動，我可以找到（至少不是與CSS）。我試過在CSS中使用不同的溢出，但沒有使得div滾動。包含菜單的div設置爲最小高度：100％，位置：固定..這兩個屬性我需要保持。

包含菜單的div位於絕對定位且高度設置爲100％的另一個包裝div內。

如果內容對於div太高，我怎樣才能讓它垂直滾動？

這導致我到另一個問題，我不希望滾動條顯示..但我想我可能已經有一個答案（只有它不工作，因爲我不能得到要開始滾動的div）。

任何解決方案？也許JavaScript需要？（其中我知之甚少）

JS Fiddle Example

，並導致該問題的相關代碼（因爲在這裏張貼整件事是waaay太長）：

.fixed-content { 
    min-height:100%; 
    position:fixed; 
    overflow-y:scroll; 
    overflow-x:hidden; 
}

還試圖加入身高：100％以及只是爲了看看這是一個問題，但它也沒有工作......也沒有固定的高度，如600px。

來源

2013-04-18 TCD Factory

請張貼與HTML和CSS一的jsfiddle。謝謝！ – mchail

你嘗試過overflow：auto; ？ – Dan

是溢出：自動或溢出-y：滾動或溢出：全部滾動不允許固定div滾動。 –

158

我知道這是一個老問題，但我只是想我會拋出這樣的答案在那裏。

使用高度：100％的問題是，它將是100％的頁面而不是100％的窗口（正如您可能預期的那樣）。這會導致你看到的問題，因爲非固定內容足夠長，可以包含100％高度的固定內容而不需要滾動條。瀏覽器不知道/關心你實際上不能滾動該欄來看它

但是，因爲修復具有它所做的屬性，所以你可以這樣做，並完成你想要的這樣做：

.fixed-content { 
    top: 0; 
    bottom:0; 
    position:fixed; 
    overflow-y:scroll; 
    overflow-x:hidden; 
}

這是你的jsfiddle顯示我修復工作的叉：你目前正在使用，所以我們可以看到這個問題 http://jsfiddle.net/strider820/84AsW/1/

來源

2013-08-21 20:01:18 strider820

工作過，我需要這篇文章來改編一篇Codrops文章，有些人可能需要使用左右手也設置爲0非常感謝，運氣 –

+10

如果將「overflow-y」設置爲auto，則當內容位於視口內時，滾動條將消失。換句話說，如果它不溢出，則不會出現溢出滾動條，當它溢出時，會出現一個滾動條 – train

正確，我只是在用他的css來修復那些真正被破壞的東西，但他似乎已經在他的問題中找到了答案了 – strider820

這裏有兩個修正。

首先，關於固定側邊欄，你需要給它的高度爲它溢出：

HTML代碼：

<div id="sidebar">Menu</div> 
<div id="content">Text</div>

CSS代碼：

body {font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;} 
#sidebar {position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;} 
#content {width:80%; padding-left:20%;} 

@media screen and (max-height:200px){ 
    #sidebar {color:blue; font-size:50%;} 
}

活生生的例子： http://jsfiddle.net/RWxGX/3/

這是不可能的不是如果你的內容溢出了div的高度，就得到一個滾動條。這就是爲什麼我添加了屏幕高度的媒體查詢。也許你可以調整你的風格以適應短小的屏幕尺寸，這樣就不需要出現滾動條。

乾杯，伊格納西奧

來源

2013-04-18 23:46:04 ignacioricci

查看我發佈的JSFiddle示例，您將看到該問題。 –

我已經看到它了。我發給你的解決了這些問題... – ignacioricci

這在舊版本的瀏覽器中無法正常工作，比如iOS版本的Mobile Safari 4.2 – mheavers

有一個固定的位置div，需要滾動，如果內容溢出

回答

相關問題