基於窗口大小的可滾動div上的動態最大高度

試圖實現具有自動最大高度的div，以便當div中的列表非常長時，它不會強制整個頁面滾動，而是延伸它的高度儘可能低，因爲它可以在不使頁面滾動的情況下進行，並且在div本身內具有滾動條。目前，它的最大高度爲800px。這應該是自動設置，取決於瀏覽器視口分辨率。基於窗口大小的可滾動div上的動態最大高度

http://plnkr.co/edit/vt2tvVAErdpmPRkg1txd?p=preview

<body> 
<div class="container"> 
<div class="row"> 
    <div class="col-md-8"> 
<div class="panel panel-body panel-primary"> 
MainContent 
</div> 
    </div> <!-- /.col-md-8 --> 
    <div class="col-md-4"> 
      <div data-spy="affix"> 
      some list here 
      <div style="max-height:800px; 
overflow-y: auto; overflow-x: hidden; margin-top: 5px"> 
       <div class="panel panel-body panel-default"> 


         another list here, but this div should have an auto max height so that when the list is really long, it does not force the entire page to scroll, but instead extends its height to as far low as it can without making the page scroll, and have a scrollbar within the div itself. Currently, it is set with max-height of 800px. This should be autoset depending in browser viewport size. 
        </br> 

        </br> 

        </div> 

       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</body>

來源

2013-12-14 user2580209

OK，所以在你的plnkr，我看不到你的引導COL-MD-X採用了div類（我不知道爲什麼？）。但是，任何方法，你想保留在4列寬的頁面右側的詞綴。那麼，在這種情況下，您應該檢查瀏覽器負載上的瀏覽器高度並調整瀏覽器的事件大小，然後相應地設置最大高度。此最大高度不應包含DIV.affix的邊距。

很好，代碼應該是這樣的：

function setMaxheight(){ 
    var affixEle = $(">div", ".affix").first(), 
     winHeight = $(window).height(); 

    // If there is some margins from top or bottom, remove it like: 
    // winheight -= 20; 

    affixEle.css({ 
     'max-height' : winHeight + "px" 
    }); 
} 

$(function(){ 
    setMaxheight(); 

    $(window).resize(function(){ 
     setMaxheight(); 
    }); 
});

CSS應該是：

.affix > div{ 
    margin-top: 5px; 
    overflow: auto; /*You dont need to put overflow-y or something. overflow:auto works perfectly*/ 
}

來源

2013-12-14 13:36:50

http://plnkr.co/edit/vt2tvVAErdpmPRkg1txd?p=preview – user2580209

我相信這是工作，但使用後不最大高度踢入。在加載時，沒有滾動可用。 – user2580209

好的，我刪除了詞綴，現在最大高度可以在頁面加載時完美設置。出於某種原因，詞綴只有在您在頁面上進行大小調整等操作時纔會啓用。 – user2580209

試試這個：

jquery: 

    var divHeight=$(window).height()*62/100; 
    $("divid").css("max-height",divHeight); 

javascript: 

    var w = window.innerWidth; 
    w=w*62/100; 
    document.getElementById("p1").style.maxHeight=w+"px";

來源

2013-12-14 11:41:29

不知道你將如何實現這一點，你能不能更新plnkr？ – user2580209

使用腳本或沒有，如果你只調整瀏覽器後，使用外部JS放 –

基於窗口大小的可滾動div上的動態最大高度

回答

相關問題