css position:fixed overflow:auto

Question

I want to put a div at the bottom of the page, and set it's width to 960px, in the center of the page, the min distence to the left border is 170px. this is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
</head>
<style type="text/css">
body{width:100%;height:100%;}
*{padding:0;margin:0;}
#wrap{position:fixed;margin:0 auto;margin-left:170px;width:960px;overflow:auto;bottom:0;height:100px;}
</style>
<body>
<div id="wrap">
test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test
</div>
</body>
</html>

But when the screen width is 1024, the div#wrap has no scroll and the right part is not displaying. How do I fix it?

jlmakes · Accepted Answer · 2011-01-13 12:43:06Z

3

I think I understood the question, but I'm still not clear on what you're trying to build.

You should change

position : fixed;

to:

position : absolute;

This fixes your scrolling issues.

. . .

*note: I also think you can remove the

overflow: auto;

Also, change:

body{ width:100%;height:100%; }

to:

html, body{ 
    width:100%; 
    min-height: 100%;
    height: auto !important;        
    height:100%; 
}

edited Jan 13, 2011 at 12:43

answered Jan 13, 2011 at 12:26

jlmakes

2,9651 gold badge28 silver badges39 bronze badges

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

2 Comments

jlmakes Over a year ago

I tested it here: jsfiddle.net/8cxmD and it doesn't appear in the middle of the page.

yuli chika Over a year ago

sorry for I have a lunch, I say in this situation, If my body have other code, I add many br in the body, the code in jsfiddle.net/624zW/1/ then, I see the div#wrap in the middle of the body. I need it like a position:fixed, always show in the bottom of the body.

Nick Pyett · Accepted Answer · 2011-01-13 12:43:11Z

0

You're div is being cut off because you have aligned it to the bottom of the browser window, and then added a left margin, pushing the div outside of the window. Overflow will not help with this, as it is not the content that is being pushed outside the div, but the whole div itself.

If you are trying to create a footer that stays at the bottom of the page, do what Julian suggests and absolutely position your div (but again be carefull with the margins), and make sure to note that the abosulely positioned div will be positioned relative to the next parent with "position:relative", or, if none are found, the html element.

answered Jan 13, 2011 at 12:43

Nick Pyett

3,4181 gold badge26 silver badges27 bronze badges

1 Comment

yuli chika Over a year ago

thanks, I update Julian code in jsfiddle.net/624zW/1/ I mean if my body height is very long, the div#wrap will display in the middle of the body even mouse scroll in y direction. I need a effection like position:fixed.

Collectives™ on Stack Overflow

css position:fixed overflow:auto

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related