滚动和 css 与 "right: 0px" 对齐答案

【问题标题】：scrolling and css align with "right: 0px"滚动和 css 与 "right: 0px" 对齐
【发布时间】：2009-01-09 10:40:24
【问题描述】：

在 HTML 页面中，如果我将一些 <div>s 与“right: 0px”对齐，它们看起来都非常好，正如我所期望的那样。但是，如果我缩小浏览器窗口并出现水平滚动条，当我向右滚动页面时，我会看到一个意想不到的空白（而不是我的<div>s 的背景颜色）。我的<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”属性使控件相对于整个页面的大小对齐，而不仅仅是可见区域？

谢谢。

【问题讨论】：

标签： html css scroll alignment

【解决方案1】：

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

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

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

【讨论】：

谢谢。你的回答把我带到了正确的方向。我想我没有充分解释我想要什么。最后，我为“#parent”添加了两个属性：“min-width: 1100px; min-height: 700px;”。基本上我不希望父级的大小变得小于其子级覆盖的区域。

【解决方案2】：

如果你添加

html{ border: 3px solid red }

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

假设边框、边距和内边距都设置为 0，这可以工作。否则，这些项目将超出可见页面。请记住，宽度是在所有这些都应用于盒子模型的外部之前呈现的宽度。

【解决方案5】：

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

#ex {overflow: scroll}

【讨论】：

【解决方案6】：

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

【讨论】：

w3schools.com/css/pr_pos_right.asp w3schools.com/css/pr_pos_bottom.asp
好的，但同时使用left、right、bottom和top的逻辑是什么？