Question

当我将我的包装器绝对和右侧放置时，在缩小窗口时没有触发水平滚动条。

代码：

<div id="wrapper"></div>


#wrapper {
 width: 400px;
 height: 400px;
 position: absolute;
 right: 20px;
 top: 0px;
 border: 1px solid red;
}

如果我右转：20px;离开：20px;它正在发挥作用，但并非如此。知道如何在没有javascript的情况下修复它吗？

Answer 1

使用float right对我来说更符合逻辑，但你需要绝对位置，你可以设置包含元素的宽度或最小宽度。

body {
    position: relative;
    height: 400px; //needs to be at least 1px
    width: 100%;
    min-width: 422px; // the width you'd like to horizontal scrollbar to appear
}

Answer 2

问题是#wrapper之后没有内容。要获得水平滚动，必须将内容锚定在文档的左边缘，当视口变窄或所述内容超出视口宽度时，该内容将变为隐藏状态。由于#wrapper向右浮动，这是不可能的，因为它没有左侧锚点。 :after让它发挥作用。

#wrapper { float:right ... }

body:after {
    clear:right;
    content:' ';
    display:block;
    height:1px;
    min-width:420px
}

上面的CSS在body的内容之后添加了一个空格，即#wrapper。该空间至少是#wrapper框模型的宽度，但没有浮动，并且锚定在视口的左边缘。所以...一旦隐藏了它的最右边缘，就会触发水平滚动;从而产生#wrapper导致滚动事件的错觉。

小提琴：http://jsfiddle.net/jg3nH/

绝对右侧 - 无滚动条可见

2 个答案: