帶有持久邊框的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緊緊圍繞可見滾動內容的大小

回答

相關問題