如何在不使用固定位置的情況下使視口100％的視口？

如果另一個div大於屏幕，我怎樣才能使側欄100％的整個頁面而不是100％的屏幕？如何在不使用固定位置的情況下使視口100％的視口？

我想因爲我需要這個包含大量的，這將需要滾動信息，以避免使用邊欄上固定的位置。

body { 
    height:100%; 
    background:red; 
} 
#container { 
    width:50%; 
    margin:0 auto; 
    height:1200px; 
    background:white; 
} 
#left { 
    position:absolute; 
    float:left; 
    height:100%; 
    width:100px; 
    background:black; 
} 

<body> 
    <div id="left"></div> 
    <div id="container"></div> 
</body>

http://jsfiddle.net/jBMBR/2/

來源

2013-05-13 Michael N

請provid e更多信息。你的問題不清楚。 – 2013-05-13 07:03:51

這是否實現你的願望是什麼？ http://jsfiddle.net/David_Knowles/qfTd5/

body{ height:100%; background:red; position:relative;} 
#container{ width:50%; margin:0 auto; height:1200px; background:white;} 
#left{ position:absolute; top:0; bottom:0; right:0; width:100px; background:black; overflow:scroll;}

來源

2013-05-13 07:06:09 Timidfriendly

+1我更喜歡你的。乾杯! – AlienWebguy 2013-05-13 07:14:00

啊，是的！很好謝謝。 – 2013-05-13 23:25:18

有這樣做的幾種方法，但我發現最簡單的方法是這樣的：

CSS：

<style> 
    html, body { height: 100%;} 
    #left, .main, #wrapper { height: 100%;} 
    .wrapper { display: table;position: relative; }  
    #left { position: relative;background: yellow;width: 100px;display: table-cell;} 
    .main { position: relative;background: yellowgreen;width: 500px;display: table-cell;} 
</style>

HTML：

<div class="wrapper"> 
    <div id="left"> 
     <p>left nav</p> 
    </div> 
    <div class="main"> 
     <p>asdfasdf</p> 
     <p>asdfasdf</p> 
     <p>asdfasdf</p> 
     <p>asdfasdf</p> 
     <p>asdfasdf</p> 
     <p>asdfasdf</p> 
     <p>asdfasdf</p> 
     <p>asdfasdf</p> 
     <p>asdfasdf</p> 
     <p>asdfasdf</p> 
     <p>asdfasdf</p> 
    </div> 
</div>

http://jsfiddle.net/jBMBR/6/

來源

2013-05-13 08:51:48 Raver0124

如何在不使用固定位置的情況下使視口100％的視口？

回答

相關問題