带有持久边框的Html可滚动div紧紧围绕可见滚动内容的大小

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

如果列表内容视适合不滚动，则必须边框包裹紧密的列表内容（所以我不能边框设置为DIV“列左”因为我并不需要整个周围的边框大面积可能包含列表项目）。

如果视口小，列表内容然后滚动边界必须坚持（我想念它在容器的顶部和底部在我vertial列表的例子）。

这对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>

来源

2017-04-07 N.Cherney

这将更好地工作，如果你给分频器周围的列表项的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元素而不是列表元素的原因？

来源

2017-04-07 06:40:48

是的，它的工作原理有些好转，但滚动条出现的边界，不好看内。 P.S.列表元素也可以。 –

这里的HTML/CSS与工作的例子

编辑的jsfiddle：编辑由于你的回应对方的回答。当溢出时，棕色边框现在位于滚动条内

编辑2：由于评论此答案而进行的第二次编辑。我能想到的最好的办法是取消position: absolute;，并将其改为position: relative;，最大高度。

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

来源

2017-04-07 18:21:24 philr

如果视口很大，示例中的边框不会紧密包围列表内容。下面有一个很大的空白空间，这不是很好。 –

@N。Cherney我已经更新了jsfiddle，这是最好的我可以不用任何jQuery/JavaScript（请参阅我的edit2 + jsfiddle） – philr

看起来它注定要有js。可能我从CSS问得太多。 –

带有持久边框的Html可滚动div紧紧围绕可见滚动内容的大小

回答

相关问题