Question

我有以下HTML：

<div class="container">
<div class="scrollable-block">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    <div class="absolute-div"></div>
</div>

和CSS：

.container {
    width: 200px;
    height: 300px;
    background: green;
}

.scrollable-block {
    width: 200px;
    max-height: 250px;
    overflow: scroll;
    position: relative;
}

.absolute-div {
    width: 20px;
    height: 20px;
    background: purple;
    position: absolute;
    top: 0;
    right: -10px;
}

这是一个现场演示：http://jsfiddle.net/BYTam/1/

绿色div是容器，具有固定宽度。黄色div位于其中，并具有max-height和overflow-y：scroll。它意味着与绿色宽度相同。我试图绝对地定位紫色div，相对于黄色div，但在绿色div之外 - 原因是我不希望黄色div有水平滚动条。这甚至可能吗？

谢谢！

Answer 1

您无法使用当前标记执行此操作。 absolute-div将始终触发水平滚动条，因为它嵌套在可滚动块内。似乎现代浏览器不允许overflow-x：with overflow-y：scroll。

Answer 2

我认为不可能从滚动块中弹出绝对div。我遇到了同样的问题，这就是我修复它的方法：

[undefined, undefined, undefined]

Answer 3

如果您不希望水平滚动条只需将overflow:scroll更改为

overflow-y:scroll;
overflow-x:hidden;

在overflow-y中定位绝对div：滚动div

3 个答案: