div height vertical scrollbar

Question

My current page looks like this:

I would like to do that vertical scrollbar is always showed(when the page is too large). Horizontal scrollbar should be at the bottom of browser like this:

How can I this. I hope I explained.

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 made this: http://85.10.35.158/. The only problem is that I can't make the width of #content the same as the width of #header.

enter image description here

I tried with jQuery:

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

but I don't like that javascript is used for design. Is there any way it can be done with CSS. Maybe css3.

You mean you want a horizontal scrollbar at the bottom of the window? — Kyle
– Kyle, Commented Sep 5, 2011 at 10:29

marcgg · Accepted Answer · 2011-09-05 10:32:37Z

3

You want to take a look at the overflow CSS property: http://www.w3schools.com/cssref/pr_pos_overflow.asp

answered Sep 5, 2011 at 10:32

marcgg

66.9k53 gold badges183 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

div height vertical scrollbar

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related