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

我想为小部分制作一个垂直滚动条。这里有一个例子：有一个部分有它自己的滚动条

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元素后给出水平滚动条，如何我会做同样的垂直滚动条吗？

来源

2017-10-07 SkyjumperTalon

请不要使用''这是过时的 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/内容 –

看着CSS溢出 – Juan

，如果你想使用width和height为百分比子元素只要给width: 100%; height: 100%;到html和body。您还应该为<content class="main">元素指定max-height: 40%;，而不是子代<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; 
 
}

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

来源

2017-10-07 14:04:02

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

回答

相关问题