Div與滾動條內div與位置：固定

我有一個位置的div：固定，這是我的一些菜單的容器div。我將它設置爲top：0px，bottom：0px以始終填充視口。在那個div裏我想要另外兩個div，其中較低的一個包含很多行，並且溢出：auto。我期望它將被包含在容器div中，但是如果有太多的行，它只會擴展到固定div之外。下面是我的代碼和截圖澄清：Div與滾動條內div與位置：固定

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>MyPlan</title> 
    <meta name="X-UA-COMPATIBLE" value="IE=8" /> 
    <style type="text/css"> 
     #outerfixed { position:fixed; width:200px; background-color:blue; padding:5px; top:0px; bottom:30px;} 
     #innerstatic1 { width:100%; background-color:yellow; height:100px;} 
     #innerstatic2 { overflow:auto; background-color:red; width:100%;} 
    </style> 
</head> 
<body> 
    <div id="outerfixed"> 
     <h3>OUTERFIXED</h3> 
     <div id="innerstatic1"> 
      <h3>INNERSTATIC1</h3> 
     </div> 
     <div id="innerstatic2"> 
      <h3>INNERSTATIC2</h3> 
      line<br /> 
         ...lots of lines 
      line<br /> 
     </div> 
    </div> 
</body> 
</html>

alt text

有沒有辦法爲我做到這一點？再次，我希望#innerstatic2被正確地包含在#outerfixed中，並且如果它比#outerfixed內部的空間大，就會得到滾動條。

我知道有一些可能性可以通過修復＃innerstatic2來解決這個問題，但是如果可能的話，我真的很喜歡它在#outerfixed裏面的流程內，這樣如果我移動#outerfixed在某處，內部元素會隨它而來。

編輯：我知道我可以在#outerfixed上設置溢出並自動獲取滾動條，但我特別想在＃innerstatic2上使用滾動條，它是一個網格，我只想滾動網格。

有人嗎？可能？

來源

2010-10-01 Einar Egilsson

它是必須與溢出：自動屬性的容器div。在這種情況下，#outerfixed DIV

來源

2010-10-01 07:00:08

對不起，我本來應該更清晰解決它。我明確希望滾動條只能在＃innerstatic2元素上。這是一個網格，我只想滾動網格，而不是整個容器。 –

有這兩個步驟的解決方案，但它是有代價的東西：

添加overflow-y: scroll;到CSS的#innerstatic2。
定義height（或max-height）爲#innerstatic2，否則不會溢出，它只會不斷增加其高度（默認爲div是height: auto）。

編輯，因爲我不能阻止我自己，有時。

我已在jsbin上發佈了一個演示，展示了一個jQuery實現，它將爲您計算一個height（它不是泛化的，所以它只能用於當前的html）。

(function($) { 
    $.fn.innerstaticHeight = function() { 
     var heightOfOuterfixed = $('#outerfixed').height(), 
     offset = $('#innerstatic2').offset(), 
     topOfInnerstatic2 = offset.top, 
     potentialHeight = heightOfOuterfixed - topOfInnerstatic2; 

     $('#innerstatic2').css('height',potentialHeight); 
    } 
})(jQuery); 

$(document).ready(
    function() { 
     $('#innerstatic2').innerstaticHeight(); 
    } 
);

來源

2010-10-01 07:01:14

謝謝你的回答。事實上，這幾乎是我們今天所擁有的，爲＃innerstatic2計算正確的高度並使用jquery進行設置。但是，當我們在文檔準備好的時候混淆了這一點時，第三方組件會錯誤地計算出一些尺寸，這就是爲什麼我真的想要一個純粹的CSS解決方案的原因。 –

那麼，有沒有辦法強制在＃innerstatic2上通過設置#outerfixed的高度滾動？從我所嘗試的似乎不是，＃innerstatic2只是在外面流動，如果我在#outerfixed上設置了明確的高度，但是是因爲它的位置：fixed？ –

它可能是。你也可以在'#fixedfixed'的'CSS中加入'overflow：hidden'，但不幸的是* *看起來特別漂亮。 –

我，唯一的辦法，就是設置innerstatic2絕對位置（所以你可以用頂部和底部的尺寸是相對於outerfixed），那裏面innerstatic2創建另一個DIV哪裏你把你的文字放在裏面。然後你給innerstatic2「overflow：auto;」指示。這種方法的缺點是，當innerstatic1增長時，innerstatic2不會下移，因爲它必須是絕對位置的。如果它需要移動，它必須是「位置：相對的」，但是你需要爲它設置一個固定的高度。所以無論哪種方式，你都必須妥協。

一旦所有瀏覽器都支持較新的CSS3功能（如計算支持），那麼將會有更好的選項來執行此操作，而沒有這些缺點。

來源

2010-10-01 15:41:14

並不理想，但是這應該給你90％的他們的方式

<div style="position:fixed; bottom:1px; left:5em; height: 20em; width:20em; background-color:blue;"> 
     <div style ="width:15em; background-color: green;"> 
       Title 
     </div> 
     <div style ="background-color:yellow; max-height:80%; width:15em; overflow:auto;"> 
       <div style="height:100em; background-color:red; width:10em;"> 
         scroll<br/> 
         scroll<br/> 
         scroll<br/> 
       </div> 
     </div> 
</div>

來源

2011-01-20 19:39:35 SooDesuNe

您應該設置outerfixed和最大高度高度innerstatic2

看，這可能是有幫助的DEMO

來源

2012-09-24 06:29:06 Afshin

overflow-y:scroll;

並將其添加於iOS設備。它確實使用觸摸提供了更好的滾動效果。溢出-y需要滾動！出於安全原因。汽車不會爲某些人工作。或者至少這就是我所聽到的。

-webkit-overflow-scrolling: touch;

來源

2014-05-14 17:46:47 Dyrehauge

我給予絕對位置UL和高度100％

ul { 
    overflow-y: scroll; 
    position: absolute; 
    height: 100%; 
}

check out this FIDDLE

來源

2014-08-06 07:50:26

此解決方案隱藏'ul'的低端（它不會顯示最後一個'li'實例） – sjbuysse

謝謝，拯救了我的生命:) –

Div與滾動條內div與位置：固定

回答

相關問題