Question

我想为一个小部分制作一个垂直滚动条。这是一个例子：

HTML：

<content class="main">
    <h3 class="news">News</h3>
</content>

CSS：

body {
  background-color: teal;
}

.main {
  border: 1px solid black;
  border-radius: 5px;
  background-color: #00dddd;
  width: 50%;
  float: left;
}

.news {
  max-height: 40%;
}

当我发送垃圾邮件时，如何保持该部分不会超过50％：

<content class="main">
  <h3 class="news">News</h3>
  <h3 class="news">News</h3>
  <h3 class="news">News</h3>
  <h3 class="news">News</h3>
  <h3 class="news">News</h3>
  <h3 class="news">News</h3>
  <h3 class="news">News</h3>
  <h3 class="news">News</h3>
  <h3 class="news">News</h3>
</content>

与我将太多h3元素放在一个页面上之后Stack Overflow如何给出一个水平滚动条类似，我如何为垂直滚动条做同样的事情？

Answer 1

如果要将width: 100%; height: 100%;和html用于百分比中的子元素，请将body提供给width和height。您还应为max-height: 40%;元素指定<content class="main">，而不是为子<h3 class="news">指定overflow-y: auto;。并且不要忘记将content添加到html, body { background-color: teal; width: 100%; height: 100%; padding: 0; margin: 0; } .main { border: 1px solid black; border-radius: 5px; background-color: #00dddd; width: 50%; float: left; max-height: 40% !important; overflow-y: auto; }元素，它会在需要时添加垂直滚动。这是一个例子：

＆＃13;

<content class="main">
  <h3 class="news">News</h3>
  <h3 class="news">News</h3>
  <h3 class="news">News</h3>
  <h3 class="news">News</h3>
  <h3 class="news">News</h3>
  <h3 class="news">News</h3>
  <h3 class="news">News</h3>
  <h3 class="news">News</h3>
  <h3 class="news">News</h3>
</content>

＆＃13;

pass

＆＃13;

有一个部分有它自己的滚动条

1 个答案: