with "right: 0px", they all look very pretty as ...">
Clever Geek Handbook

Scrolling and css are aligned with "right: 0px"

On the HTML page, if I align a few <div>

with "right: 0px", they all look very pretty as I expect. However, if I shrink my browser window and a horizontal scrollbar appears, when I scroll to the right, I see unexpected white space (instead of the background colors of my <div>

s). Mine seems to be <div>

aligned relative to the visible area of ​​the page. See sample code below:

<html>
    <head>
        <style>
        <!--
        #parent {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            background-color: yellow;
        }

        #child {
            position: absolute;
            left: 100px;
            top: 300px;
            width: 1000px;
            height: 400px;
            background-color: blue;
        }
        -->
        </style>
    </head>
    <body>
        <div id="parent"><div id="child">some text here</div></div>
    </body>
</html>

Is there a way to make the "right: 0px" property align the controls to the size of the entire page, not just the viewport?

Thank.

0


source to share


6 answers


The problem is the "absolute" position in the parent element as it scrolls for each definition.

If you set the position to "fixed" and the optional scroll attribute overflow, it should look as expected.



#parent {position: fixed;
         overflow: scroll;         
         left: 0px;
         top: 0px;
         right: 0px;
         bottom: 0px;
         background-color: yellow;
        }
+4


source


if you add

html{ border: 3px solid red }


into the stylesheet, you will see that you are setting the "right" property to the edge of the page.

I think you need to rethink your strategy. What are you trying to achieve?

0


source


Don't use an absolute position unless you absolutely must. Use margins and shims instead. And don't forget the reset and paddings fields so you don't start with what the browser had by default.

0


source


Do I need to use absolute positioning in your case? Otherwise, you can remove the properties on the left and right and just use the width: 100%;

0


source


My answer is: do you want to change the aligned scroll? example of scrolling "right align".

#ex {overflow: scroll}
0


source


Right? Bottom? Are you sure these are even real CSS attributes? Usually you just set top / left and then width / height ...

-2


source






More articles:


All Articles