Question

让我们假设我们有一些列表容器（下面代码中的 div ），我们需要能够调整它可见的视口大小。我们需要在列表的内容周围添加一些边框（在我的示例中，边框有“棕色”颜色）。所以这就是问题所在。

如果列表内容适合视口而不滚动，则边框必须紧紧包围列表内容（因此我无法将边框设置为 div “Column Left”，因为我不需要整个大区域的边界，可能包含列表项目。）

如果视口很小并且要滚动列表内容，那么边框必须保持不变（我想念它在我的垂直列表示例中的容器顶部和底部）。

这是GUI的常见行为。

.bkgnd {
    position: absolute;
    background-color: grey;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.Column{
    overflow: auto;
    position: absolute;
}

.Left{
    width: 460px;
    top: 100px;
    bottom: 70px;
    left: 17px;
}

.ListItem{
    background-color: yellow;
    margin: 5px 0 0 0;
}

.ListItem:first-child{
    margin: 0;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />


</head>

<body>
    <div class="bkgnd">
        <div class="Column Left">
            <div style="padding: 5px; background-color: brown;">
                <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
                <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
                <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
                <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
                <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
                <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
            </div>
        </div>
    </div>
</body>

Answer 1

如果您将列表项周围的分隔符设为id并使用其余CSS设置上面的样式，这样会更好。有没有理由这对你的情况不起作用？

在HTML中：

<div id="testing">
  <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
  <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
  <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
  <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
  <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
  <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
</div>

在CSS中：

#testing {
  border: 5px solid brown;
  background-color: brown;
  overflow: auto;
  position: absolute;
  width:  450px;
  max-height: 100%;
  top:    0px;
  left:   0px;
}

然后更改.Column类属性，以便可以看到溢出。

.Column{
  overflow: visible;
  position: absolute;
}

旁注： 如果您希望制作自适应网页，则应尽可能频繁地使用百分比而不是像素。另外，您是否有理由更喜欢使用div元素而不是列表元素？

Answer 2

这是带有工作示例的jsfiddle的html / css

编辑：由于您对其他答案的回复而编辑。当出现溢出时，棕色边框现在位于滚动条内

EDIT2：由于对此答案发表评论而进行第二次编辑。我能想到的最好的方法是删除position: absolute;并将其更改为position: relative;，最大高度。

https://jsfiddle.net/qb3rsre8/7/

具有持久边框的Html可滚动div，紧密包围可见滚动内容大小

2 个答案: