使 div 在固定侧边栏 (CSS) 内可滚动

sombody 能帮我吗？侧边栏内的div(最后一个)是可滚动的。我想将侧边栏用于一些功能，例如电话号码搜索和显示生日。

在最后一个div中，我想显示很多通知。每个通知的最小高度约为 100px。如果太多，我想使div 可滚动。

到目前为止，这是我的代码：

JSFiddle

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 36px;
background-color: red;
border: 4px solid blue;
}
.sidebar {
position: fixed;
top: 36px;
bottom: 0;
right: 0px;
width: 200px;
background-color: blue;
border: 4px solid yellow;
}
.sidebar_item {
margin-bottom: 5px;
}
.item_header {
font-weight: bold;
border: 1px solid #000;
background-color: green;
}
.content {
margin-top: 36px;
margin-right: 200px;
background-color: yellow;
border: 4px solid purple;
}

<div class="navbar">Navbar</div>
<div class="sidebar">
<div class="sidebar_item">
<div class="item_header">Header</div>
Content
</div>
<div class="sidebar_item">
<div class="item_header">Header</div>
Content
</div>
<div class="sidebar_item">
<div class="item_header">Header</div>
Content
</div>
<div class="sidebar_item">
<div class="item_header">Header</div>
Content
</div>
<div class="sidebar_item">
<div class="item_header">Header</div>
Content
</div>
<!-- Scrollable div -->
<div class="sidebar_item">
<div class="item_header">Header</div>
<p>TOP</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>BOTTOM</p>
</div>
</div>
<div class="content">
<p>TOP</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>BOTTOM</p>
</div>

可滚动的div 更改为另一个名称，我将其更改为 sidebar_item2

并应用了以下 CSS

.sidebar_item2 {
overflow-x:auto;
height:100px;
}

希望这就是你正在尝试的。

您需要在侧边栏类中包含overflow:auto;样式。

如果你想让最后一个孩子和其他人不同......滚动 Y 说。有一个伪类选择器。

.sidebar:last-child { overflow-y: scroll; }

.sidebar_item:last-child伪类选择器一起使用，并使用calc()计算高度

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 36px;
background-color: red;
border: 4px solid blue;
}
.sidebar {
position: fixed;
top: 36px;
bottom: 0;
right: 0px;
width: 200px;
background-color: blue;
border: 4px solid yellow;
}
.sidebar_item {
margin-bottom: 5px;
}
.item_header {
font-weight: bold;
border: 1px solid #000;
background-color: green;
}
.content {
margin-top: 36px;
margin-right: 200px;
background-color: yellow;
border: 4px solid purple;
}
.sidebar_item:last-child {
overflow-y:auto;
height: calc( 100% - 215px);
}

<div class="navbar">Navbar</div>
<div class="sidebar">
<div class="sidebar_item">
<div class="item_header">Header</div>
Content
</div>
<div class="sidebar_item">
<div class="item_header">Header</div>
Content
</div>
<div class="sidebar_item">
<div class="item_header">Header</div>
Content
</div>
<div class="sidebar_item">
<div class="item_header">Header</div>
Content
</div>
<div class="sidebar_item">
<div class="item_header">Header</div>
Content
</div>
<!-- Scrollable div -->
<div class="sidebar_item">
<div class="item_header">Header</div>
<p>TOP</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>BOTTOM</p>
</div>
</div>
<div class="content">
<p>TOP</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>BOTTOM</p>
</div>

工作演示

相关内容

最新更新

热门标签：