滚动和css与“右：0px”对齐

In an HTML page, if I align some <div>s with "right: 0px", they all look very nice, as I expect. However, if I make the browser window smaller and the horizontal scroll bar appears, when I scroll the page to the right, I see an unexpected white space (instead of the background colors of my <div>s). It seems that my <div>s are aligned relative to the visible area of the page. See the sample code below:

在HTML页面中,如果我将一些

与“right:0px”对齐,它们看起来都非常好,正如我所料。但是,如果我使浏览器窗口变小并出现水平滚动条,当我向右滚动页面时,我会看到一个意外的空白区域(而不是我的

的背景颜色)。似乎我的

是相对于页面的可见区域对齐的。请参阅以下示例代码:

<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 any way to make the "right: 0px" property align the controls relative to the size of the entire page, not only the visible area?

是否有任何方法可以使“right:0px”属性相对于整个页面的大小对齐控件,而不仅仅是可见区域?

Thanks.

6 个解决方案

#1

The Problem is the "absolute" position in the parent element, because it's scrollable per definition.

问题是父元素中的“绝对”位置,因为它可以按照定义滚动。

If you set the position to "fixed" and an additional attribute overflow to "scroll", it should look like expected.

如果将位置设置为“固定”并将其他属性设置为“滚动”,则应该看起来像预期的那样。

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

#2

if you add

如果你添加

html{ border: 3px solid red }

to your stylesheet, you'll 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?

我想你需要重新考虑你的策略。你想要达到什么目的?

#3

Dont use absolute position unless you absolutely must. Use margins and paddings instead. And dont forget to reset margins and paddings so you dont start with whatever the browser has as default.

除非绝对必要,否则不要使用绝对位置。请改用边距和填充。并且不要忘记重置边距和填充,这样你就不会从浏览器的默认设置开始。

#4

Is it necessary to use absolute positioning in your case? Otherwise you can remove the left and right properties and simply use width: 100%;

在您的情况下是否有必要使用绝对定位?否则你可以删除左右属性,只需使用宽度:100%;

#5

my answer is i want change align scroll? example "right align" scroll.

我的回答是我想要改变对齐滚动?示例“右对齐”滚动。

#ex {overflow: scroll}

#6

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

对?底部?确定这些甚至是真正的CSS属性吗?通常你只需要设置顶部/左边然后设置宽度/高度......

#1