CODEWITHSUNDEEP
jquerycsshtml
broadband
broadband

Reputation: 3488

div height vertical scrollbar

My current page looks like this:

http://www.shrani.si/f/a/GT/3hC4YcIR/image4.jpg

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:

http://www.shrani.si/?b/CE/jwJ7poJ/image5.jpg

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.

Upvotes: 0

Views: 834

Answers (1)

marcgg
marcgg

Reputation: 66436

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

Upvotes: 3

Related Questions