CODEWITHSUNDEEP
cssoverflow
yuli chika
yuli chika

Reputation: 9221

css position:fixed overflow:auto

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?

Upvotes: 1

Views: 15351

Answers (2)

Nick Pyett
Nick Pyett

Reputation: 3408

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.

Upvotes: 0

jlmakes
jlmakes

Reputation: 2965

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%; 
}

Upvotes: 3

Related Questions