My current page has a layout similar to this:
I want the vertical scrollbar to always be visible when the content exceeds the page size. The horizontal scrollbar should remain at the bottom of the browser window, like in the following example:
How can I achieve this? I hope I've explained it clearly.
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;
} Updated
I have created a website at . However, I am facing an issue where I cannot set the width of #content equal to the width of #header.
I attempted using jQuery:
var width = $(document).width() - $('#header').width();
$('#content').css('width', width); but I prefer not relying on JavaScript for design purposes. Is there a way to achieve this using CSS alone, maybe with CSS3?