html - 如何在不增加页面内容的情况下给滚动条固定高度？

Question

在这里，我试图为滚动条提供一个独立于页面内容高度的固定高度。我在下面添加了我的代码。

section#data-container{
    height:400px;
    width:200px;
    overflow-y: scroll;
    border:1px solid #000;
    
}
::-webkit-scrollbar {
    width: 10px;
    /*height: 30px;*/
}

::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

<section id="data-container">
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g

ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
</section>

它的出现就像在下面显示的图像上显示的一样

我想减小宽度并将其设置为固定宽度。谁能帮帮我？

Answer 1

尝试在 data-container 中提供 min-height。

section#data-container{
    min-height:400px;
    width:200px;
    overflow-y: scroll;
    border:1px solid #000;

}

片段代码

section#data-container{
    min-height:400px;
    width:200px;
    overflow-y: scroll;
    border:1px solid #000;
    
}
::-webkit-scrollbar {
    width: 10px;
    /*height: 30px;*/
}

::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

<section id="data-container">
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g

ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
</section>