html - 滚动和 css 与 "right: 0px" 对齐

Question

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

<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”属性使控件相对于整个页面的大小对齐，而不仅仅是可见区域？

谢谢。

score 4 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

#ex {overflow: scroll}

score 0 · Accepted Answer

如果你添加

html{ border: 3px solid red }

在您的样式表中，您会看到您正在将“right”属性设置为页面边缘。

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

在您的情况下是否有必要使用绝对定位？否则，您可以删除左右属性并简单地使用 width: 100%;

score -3 · Accepted Answer

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

html - 滚动和 css 与 "right: 0px" 对齐

6 回答 6

Related

Reference