Here's some sample code showing my problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>fixed div</title>
<style type="text/css">
    #container {
        position: fixed;
        top: 20px;
        left: 20px;
        width: 100px;
        border: 5px solid black;
     }

</style>
    </head>
    <body>
    <div id="container">
Mauris tristique pulvinar urna. Nam tincidunt malesuada sodales. In facilisis velit sed mi scelerisque ut facilisis eros convallis. Nulla facilisi. Donec tortor lacus, convallis placerat dictum ut, congue in lectus. Sed non elit sit amet justo blandit pulvinar nec sit amet lorem. Praesent eu leo risus. Mauris ut tortor ac elit posuere tincidunt. Nam sed gravida quam. Ut tincidunt lobortis molestie. Nunc accumsan, ante quis malesuada iaculis, magna justo tincidunt dui, ac elementum ante elit ac sapien. Morbi nec ante velit. Suspendisse condimentum tortor in purus tristique semper. Quisque pellentesque mattis metus, eu hendrerit massa eleifend ut.
    </div>
    </body>
</html>

If the window is small enough, then the content gets clipped, instead of showing scrollbars.

I'm sure it's a simple fix, but so far my google-fu is failing me.

  • Forgot to mention: the width of the div is not relevant, I just made it narrow to force the issue to appear. Also, I am using a fixed div because I'm trying to pull off one of those "pixel-perfect" sites, where the content lines up with a fixed background. If there's a better way to do something like that, it would be fine as well. Arturo R almost 7 years ago

2 answers

-1
points
This was chosen as the best answer

Hate to answer my own question, but I got around the issue by getting rid of the fixed coordinates and using margins instead.

Answered almost 7 years ago by Arturo R
1
point

You want to use the overflow property for that.
Typically:

overflow: auto;

works pretty well. If you want to specify for it to always scroll, use:

overflow: scroll;

Setting it to 'auto' will only show the scrollbar(s) when the text flows past the border(s).

Answered almost 7 years ago by DondeEstaMiCulo