时间戳

首页 > 解决方案 > div内的可滚动div

html - div内的可滚动div

问题描述

我有两个 div (content-title和content-items) 嵌入在一个固定的 div ( content) 中。我希望contentdiv 隐藏任何溢出它的内容，将content-titlediv 固定到位但可content-items滚动。

在下面的代码片段中，最终<a>元素不可见，并且content-items不会垂直滚动。请问这是为什么？

.content {
  background: grey;
  max-height: 75px;
  overflow: hidden;
}

.content-title {
  color: blue;
}

.content-items {
  color: green;
  overflow-y: scroll;
}

.content-items a {
  display: block;
 }
 
 .content-items a:hover {
  background: green;
  color: grey;
 }
 
<div class="content">

  <div class="content-title">
    select a city:
  </div>

  <div class="content-items">
    <a>Foo</a>
    <a>Bar</a>
    <a>Baz</a>
  </div>
  
</div>

标签： htmlcssscroll

解决方案

  • 设置max-height为div您需要可滚动内容的内容。
  • 在你的情况下，你设置max-height为content但你设置 overflow-y为content-items.
  • 设置max-height为content-items而不是content

.content {
  background: grey;
  
  overflow: hidden;
}

.content-title {
  color: blue;
}

.content-items {
  color: green;
  overflow-y: scroll;
  max-height: 75px;
}

.content-items a {
  display: block;
 }
 
 .content-items a:hover {
  background: green;
  color: grey;
 }
 
<div class="content">

  <div class="content-title">
    select a city:
  </div>

  <div class="content-items">
    <a>Foo</a>
    <a>Bar</a>
    <a>Baz</a>
    <a>Foo</a>
    <a>Bar</a>
    <a>Baz</a>
  </div>
  
</div>

推荐阅读