セクションに独自のスクロールバーがあります

Question

小さなセクションに垂直スクロールバーを作りたいと思います。ここでは例です：

HTML：

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

CSS：

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

：

body { 
    background-color: teal; 
} 

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

.news { 
    max-height: 40%; 
} 

とき、私はちょうどスパムこの私が50％、過去ではないオーバーフローにセクションを維持するにはどうすればよいです

1ページに収まるようにh3要素をあまりにも多く置くと、Stack Overflowが水平スクロールバーを与えたのと同様に、垂直スクロールバーでも同じことをしますか？

Answer 1

あなたがパーセントで子要素のためwidthとheightを使用する場合だけhtmlとbodyにwidth: 100%; height: 100%;を与えます。子<h3 class="news">ではなく、<content class="main">要素にはmax-height: 40%;を指定する必要があります。また、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>