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

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

尝试在min-height中给data-container。

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>