CSS：固定/固定頂部菜單欄

我讀過很多關於這個問題的問題，但沒有真正發現我在找什麼。我有下面的簡單的HTML和CSS代碼。我想要做的只是把滾動條放在「left_content」DIV上。正如您現在在示例中看到它在「左」DIV上所示。如果我將CSS中的「scroll：auto」從#left移動到#left_content，則滾動條出現在右側。這是爲什麼？以及如何將滾動條放置在#left_content上。謝謝。CSS：固定/固定頂部菜單欄

<style> 
    #left{float:left; width:50%; height:100%; overflow:auto;} 
    #right{float:left; width:50%; height:100%;} 
    #left_menu{width:100%;} 
    #left_content{width:100%;} 
    .clear{clear:both;} 
</style> 
<div id="left"> 
    <div id="left_menu"> 
    menu point 1 | menu point 2 | menu point 3 
    </div> 
    <div id="left_content"> 
    1 <br/>2 <br/>3 <br/>4 <br/>5 <br/>6 <br/>7 <br/>8 <br/>9 <br/>10 <br/>11 <br/>12 <br/>13 <br/>14 <br/>15 <br/>16 <br/>17 <br/>18 <br/>19 <br/>20 <br/>21 <br/>22 <br/> 
    1 <br/>2 <br/>3 <br/>4 <br/>5 <br/>6 <br/>7 <br/>8 <br/>9 <br/>10 <br/>11 <br/>12 <br/>13 <br/>14 <br/>15 <br/>16 <br/>17 <br/>18 <br/>19 <br/>20 <br/>21 <br/>22 <br/> 
    1 <br/>2 <br/>3 <br/>4 <br/>5 <br/>6 <br/>7 <br/>8 <br/>9 <br/>10 <br/>11 <br/>12 <br/>13 <br/>14 <br/>15 <br/>16 <br/>17 <br/>18 <br/>19 <br/>20 <br/>21 <br/>22 <br/> 
    </div> 
</div> 
<div id="right"> 
Some other content that is adjusted so that there is no scrolling needed. 
</div> 
<div class="clear"></div>

來源

2014-11-15 Sandor

是這樣的嗎？ http://jsfiddle.net/kubqrvrk/ –

'
'已棄用。使用替代品 –

謝謝。我正在尋找的是#left_content的其他地方沒有滾動條。 – Sandor

滾動條出現在右側而不是左側div的原因是您已將左右兩側的高度設置爲100％。出現的滾動條不是用於正確的div，而是用於body/document。

當你有固定的高度時，溢出CSS效果最好。如果您仍需要100％的高度，我們可以包括：

#left { max-height: 500px;}

如果您需要到左邊div的高度設置爲窗口的高度，其使用JS可能。

$('#left').css('max-height',$(window).height());

的jsfiddle：http://jsfiddle.net/h4adr4qs/

或者使用新的CSS視域值：

#left {max-height:100vh;}

我不知道有多少瀏覽器都支持 'VH' 單位。但我很確定很快就會成爲標準。

如果您需要的菜單固定，但只#left_content滾動，你需要在最大高度設置爲DIV，

#left_content { max-height: 500px;overflow:scroll}

如果你這樣做，從#left CSS刪除overflow屬性

來源

2014-11-15 02:32:25 Giri

你需要做的是一個特定的高度添加到左側DIV，例如第一件事：

#left { height: 300px; }

請注意，您不能在這裏使用百分比。像素，Ems或任何特定的單位將工作。現在讓左邊的內容佔據一部分，然後讓它滾動：

#left_content { 
    height: 90%; 
    overflow: scroll; 
}

就是這樣。在此示例中效果很好：http://jsfiddle.net/kubqrvrk/5/

來源

2014-11-15 02:21:25 JakeParis

CSS：固定/固定頂部菜單欄

回答

相關問題