DIV高度垂直滾動條

我現在的頁面看起來像這樣：DIV高度垂直滾動條

我想這樣做垂直滾動條一直顯示（當頁面過大）。水平滾動應在瀏覽器這樣的底部：

我怎麼能這樣。我希望我解釋一下。

HTML

<body> 
    <div id="top">This is the top div</div> 
    <div id="main"> 
    This is the main content area. This is the main content area..... 
    .... aaaaa... 
    </div> 
</body>

CSS

body{ 
width: 100%; 
margin: 0px; 
padding: 0px; 
} 

#top{ 
text-align: center; 
background-color: #FF0; 
height: 100px; 
position: relative; 
top: 0px; 
} 

#main{ 
background-color: silver; 
overflow: auto; 
}

更新

我做了這個：http://85.10.35.158/。唯一的問題是我無法使＃content的寬度與#header的寬度相同。

enter image description here

我試圖用jQuery：

var width = $(document).width() - $('#header').width(); 
$('#content').css('width', width);

，但我不喜歡這樣的JavaScript用於設計。有什麼辦法可以用CSS來完成。也許css3。

來源

2011-09-05 broadband

你的意思是你想在窗口底部的水平滾動條？ – Kyle

是的，我很抱歉。水平滾動條。編輯原始帖子。 – broadband

你想看看溢出CSS屬性：http://www.w3schools.com/cssref/pr_pos_overflow.asp

來源

2011-09-05 10:32:37 marcgg

謝謝。我從#main刪除溢出，它的工作原理。 – broadband

DIV高度垂直滾動條

回答

相關問題