1

スクロール可能なセクションが 2 つあるページを表示しようとしています。私が見ているのは、下のセクションにスクロール バーがありますが、切り捨てられていることです。セクションの高さプロパティを 90% から 50% に変更すると、完全なスクロール バーが表示されます。ただし、ブラウザーのサイズを小さくすると、垂直スクロール バーが再び切り詰められて表示されます。最上部の div の CSS は、高さをピクセル単位で指定する必要があります。

.rootsection {
    background-color: yellow;
    padding: 5px;
    margin: 5px;
    overflow:hidden;
    width: 100%;
    height: 200px;   
}

スクロール可能な div の CSS は次のとおりです。

.bottomSectionScrollable{
    background-color: green;    
    overflow:auto !important;
    padding: 5px;
    margin: 5px;
    height: 90%;    
}

高さを 50% に変更し、ルート セクションの高さを 200px に変更しない場合、スクロール バーが切り捨てられていないことがわかります。スクロール可能なセクションには、切り捨てられることのない垂直スクロール バーが常にあり、空白が残らないようにする必要があります。これは、ブラウザのサイズが変更された場合や、ズーム/ズーム解除アクションがユーザーに対して実行された場合でも当てはまります。ルート セクションの高さを変更してサイズ変更アクションをエミュレートしています。

フィドル

ブラウザのサイズが変更された場合でも、スクロール可能なセクションのスクロール バーが常に表示され、常に親ボックスの全スペースを占めるようにする方法について何か考えはありますか?

4

0 に答える 0