Question

在HTML页面中，如果我将一些<div>与“right：0px”对齐，它们看起来都非常好，正如我所料。但是，如果我使浏览器窗口变小并出现水平滚动条，当我向右滚动页面时，我会看到一个意外的空白区域（而不是我<div> s的背景颜色）。似乎我的<div>相对于页面的可见区域对齐。请参阅以下示例代码：

<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>

有没有办法让“right：0px”属性将控件相对于整个页面的大小对齐，而不仅仅是可见区域？

感谢。

Answer 1

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

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

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

Answer 2

如果你添加

html{ border: 3px solid red }

到你的样式表，你会发现你正在将'正确'属性设置到页面的边缘。

我认为您需要重新考虑您的策略。你想要实现什么目标？

Answer 3

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

Answer 4

是否有必要在您的情况下使用绝对定位？否则，您可以删除左侧和右侧属性，只需使用width：100％;

Answer 5

我的回答是我想要更改对齐滚动？例如“右对齐”滚动。

#ex {overflow: scroll}

Answer 6

右？底部？确定这些甚至是真正的CSS属性吗？通常你只需设置上/左，然后设置宽度/高度......

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

6 个答案: