CODEWITHSUNDEEP
htmlcss
user405398
user405398

Reputation:

How to make body tag to adjust for scroll bar?

In my website, some pages are having contents that exactly fit in the screen and some pages having scrolling content. All the pages are having, same html structure.

<body>
   <div id="header"></div>
   <div id="contentArea"></div>
   <div id="footer"></div>
</body>

#header {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #EDEDED;
height: 172px;
margin: 0 auto;
overflow: hidden;
padding-top: 2px;
width: 900px;
}

#contentArea {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 auto;
padding: 0 0 25px;
text-align: left;
width: 900px;
}

#footer {
border-top: 1px dashed #CCCCCC;
margin: 0 auto;
padding: 0;
text-align: center;
width: 900px;
}

When i move to different pages, in some pages the scroll bar appears due to the content, at that time it looks like the whole webpage moved towards left side for some 20px.

How to make the <body> to adjust itself when the scroll bar appears?

Thanks!

Upvotes: 4

Views: 28040

Answers (5)

Mixael Contreras
Mixael Contreras

Reputation: 41

The easiest way for me to do this is to use the min-height and max-height properties, that way you will not have to use the Overflow element and therefore the content will not move.

min-height: ... px/em/%
max-height: ... px/em/%

So you will write in your case:

min-height: the original height that you wanted in pixels, percentage or ems;
max-height: auto;

This way it doesn't matter how much content you put inside your box/wrapper/div , it will make the page height bigger without having to change it every time you add something to your page.
You also have the same properties for width but I have not try them.

My sources:
1-I am making a web page and studying software engineering at SB
2-http://www.w3schools.com/cssref/pr_dim_max-height.asp

PS: I know this is already solved, but I think it might be useful for someone else when they are working on their web pages.

Upvotes: 0

Ben
Ben

Reputation: 7597

Without fully testing, I suspect the reason you're seeing this is because you have an absolute width of 900px defined for the various elements that appear in the body of the page.

When the scrollbar appears, that's then eating into your screen real estate, and so the content shifts to maintain its 900px width. I would move to a more fluid sizing model, or at least wrap the content in a container of some sort, so that the scrollbar doesn't interfere with it.

Upvotes: 0

Naveed Butt
Naveed Butt

Reputation: 2901

<body style="height:100%; width:100%; overflow:auto;">
   <div id="header"></div>
   <div id="contentArea"></div>
   <div id="footer"></div>
</body>

Here is a jsfiddle link: http://jsfiddle.net/NGWgz/2/

Upvotes: 0

Boldewyn
Boldewyn

Reputation: 82734

The simplest trick is to always display a scroll bar. This is what HTML5 Boilerplate does:

html { overflow-y: scroll; }

if this doesn't fit your needs you will have to use JavaScript. On page load, detect, if body's height is larger than window's height and if not, move #header, #content and #footer to the left, e.g. via padding, or via margin on the body.

However, you have no simple means to find out, how wide the scrollbars themselves are. This, too, needs a detection via Javascript. (Basically: Create an element -> make it's content scrolling -> see how the content width changes.)

Upvotes: 11

heximal
heximal

Reputation: 10517

i belive you should specify WIDTH css attribute for BODY class:

body {
  width:100%;
}

Upvotes: 0

Related Questions