使div始終100％視口

基本上我有一個側欄和一個主欄。側欄包含一些導航圖標，主欄將包含一個iframe。使div始終100％視口

接近90％的iframe內容將在2000px左右的高度。問題在於，將側邊欄絕對定位到側面會導致min-height: 100%;僅在加載頁面時考慮視口高度。

當您向下滾動頁面以查看所有主要內容時，一旦您點擊側欄的末尾，它就會切斷。這看起來很可怕，我想知道是否有一個PURE CSS解決方案，我正在得到的問題？我可以製作一個帶有深灰色條形圖的背景圖片，但我只想看看是否有其他解決方案。

我不想使用position: fixed;的原因是，有時側欄菜單高度會發生變化，這意味着我可能需要用戶能夠使用pagescroll來查看其他選項。

我做了一個的jsfiddle幫助證明我點，這可以在這裏找到：http://jsfiddle.net/kKjBY/1/

我的HTML

<div class="wrapper"> 

    <div id="main_content" class="large"> 
      <p>Main content</p> 
     </div> 

     <div id="sidebar"> 
      <ul class="sidebar_nav"> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
       <li>6</li> 
       <li>7</li> 
       <li>8</li> 
       <li>9</li> 
       <li>0</li> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
      </ul> 
     </div> 
</div>

我的CSS

#sidebar { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 60px; 
    min-height: 100%; 
    background: #323232; 
    color: #fff; 
} 
#main_content{ 
    padding-left: 80px;  
    height: 3000px; /* stricly to demonstrate */ 
} 
#sidebar ul{ 
    margin: 0; 
    padding: 0; 
} 
#sidebar li { 
    list-style: none; 
    width: 60px; 
    height: 60px; 
    text-align: center; 
}

來源

2013-08-19 Doidgey

將position:relative;添加到包裝div並將bottom:0;添加到側邊欄。

請參閱更新的小提琴：http://jsfiddle.net/W725c/1/

來源

2013-08-19 09:30:21 robooneus

哇哦，簡直不敢相信我錯過了這一個。我感覺非常愚蠢的。非常感謝你！ – Doidgey

DIV的需要是

top: 0; 
left: 0; 
position: fixed; 
width: 100%; 
height: 100%;

然後，它將保持在視口的尺寸範圍內，並通過滾動條「移動」。

I`enter代碼在這裏，如果是風格到

它將只覆蓋整個視口

餘量：0; 填充：0;

來源

2013-08-19 09:29:35 abhinsit

使div始終100％視口

回答

相關問題