我有一个页面，其布局如所附片段所示。在右列中有一个可滚动的 div，它设置了一些最大高度。问题是，在较小的屏幕上，用户必须向下滚动到页面底部才能看到可滚动 div 的底部（并且页面相当长）。
是否可以确保div的底部永远不会低于当前视图，以便无论屏幕大小如何，都可以始终访问整个可滚动div，而无需滚动页面？对于最大宽度：991px 的屏幕，右栏被隐藏。
来自评论：
我尝试过使用
vhbody, html {
margin: 0;
padding: 0;
height: 100%;
}
.background {
background-color: #f8f8f8; /* Background color for the entire page */
height: 100%;
}
.container {
display: flex;
justify-content: space-between; /* Separate the columns */
margin: 5px; /* Add margin for visual separation */
}
.left, .right {
flex: 0 0 40%;
background-color: #fff; /* Background color for columns */
padding: 20px; /* Add padding for content */
}
.left {
margin-top: 10px; /* Add margin-top to separate from content above */
}
.right {
margin-top: 30px;
margin-left: 20px; /* Add margin-left to separate from left column */
max-height: 1350px;
overflow-y: auto; /* Enable vertical scrolling */
}<body>
<div class="background">
<div class="container">
<div class="left">
<h2>Left Column</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a massa bibendum, placerat sapien ultrices, molestie sem. Nam porttitor risus fringilla purus consectetur egestas. Sed elit arcu, eleifend eget velit at, rutrum cursus metus. Suspendisse sollicitudin orci leo, ac tristique nisi porta nec. Etiam at dui at turpis commodo congue nec vel turpis. Aliquam a libero sit amet lorem consectetur aliquet a vehicula nulla. Donec porta suscipit libero, at finibus nisi lacinia id. Quisque mattis magna interdum, tincidunt lacus vel, sodales ligula. Ut volutpat vestibulum justo non semper. Vivamus dictum mollis dignissim. Nullam condimentum venenatis metus sit amet commodo. Suspendisse potenti. Aliquam ac suscipit eros.
Etiam metus elit, varius et feugiat quis, pellentesque elementum nibh. Morbi gravida sodales velit. Vestibulum sed turpis diam. Phasellus sed malesuada ante, id ornare augue. Integer faucibus risus sed dolor tincidunt maximus ac gravida libero. Pellentesque malesuada orci non tortor sodales ultrices. Etiam dolor eros, tempus id luctus nec, commodo et purus. Suspendisse lacus nisl, tincidunt eu diam eu, eleifend ultricies ligula. Nam velit justo, fermentum sit amet laoreet ac, consectetur ut dui. Quisque lobortis dictum justo, id fringilla ipsum scelerisque vel.
Nulla a molestie sapien. Aenean varius dui lacus, tempor malesuada erat tincidunt luctus. Nam quis consectetur nisi, ut gravida mauris. Vivamus eu placerat magna, nec eleifend nibh. Phasellus iaculis congue dui, sodales dignissim nunc sollicitudin in. Cras ultricies erat id aliquam dignissim. Cras in purus malesuada, vulputate dolor vel, congue dui. Pellentesque accumsan, leo volutpat molestie tempor, odio libero ultricies ligula, quis aliquam purus neque a elit. Vestibulum sollicitudin placerat ullamcorper. Cras vel lorem eu ipsum sollicitudin rhoncus in et nisl. Cras auctor, elit et gravida facilisis, mauris ante molestie sem, in placerat orci lorem et nisl. Maecenas pellentesque, tellus a mollis posuere, nunc massa viverra nisi, id cursus leo quam non dolor. Suspendisse eget diam porta, aliquam tortor id, convallis enim. Phasellus nec lorem id arcu condimentum lobortis ut eget purus.
</p>
</div>
<div>
<h2>Right Column</h2>
<p>Here are some elements</p>
<button>Some button</button>
<div class="right">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut lectus ante. Etiam sollicitudin tortor ac nisl efficitur, a porttitor mauris bibendum. Curabitur placerat massa ligula, a tempor sem ullamcorper ac. Nam porta leo neque, vel molestie nisi ultricies at. Aliquam erat volutpat. Phasellus in augue lacus. Proin mi enim, aliquet eu elementum ut, pellentesque sit amet tellus. Proin neque mauris, molestie sed sem dictum, dictum suscipit ligula. Nulla commodo odio sem, in volutpat ante auctor tempor. Phasellus tincidunt nisi est, at dignissim augue blandit nec. Praesent et magna at libero lacinia mollis sed id neque.
Pellentesque risus nibh, iaculis id congue quis, mollis sit amet nisl. Integer ut quam orci. Curabitur imperdiet eleifend ex, id vehicula est tempor vel. Donec gravida sollicitudin augue, vitae vehicula lorem dictum tempor. Donec elementum faucibus nulla, ac euismod odio volutpat sed. Praesent convallis purus sed sem tempor, sit amet tristique leo pulvinar. Fusce id enim at ante imperdiet elementum. Nullam ac odio eu leo vehicula aliquam eget sed elit. Fusce feugiat orci arcu, sagittis faucibus sem porttitor id. Etiam et mi ac justo consequat malesuada ac at risus. Ut viverra, mauris dapibus consectetur ornare, justo metus ullamcorper nisl, eu commodo arcu enim ac ex.
Suspendisse facilisis ex eu nunc egestas pharetra. Sed egestas ultricies nisi, ac tincidunt sem consectetur ut. Nulla euismod maximus nisl sed fringilla. Morbi congue, risus ac ultricies malesuada, tellus mauris gravida leo, sit amet tincidunt massa nulla ut diam. Donec porttitor venenatis metus vel commodo. Duis varius mattis orci et tincidunt. Nulla viverra porttitor mi et feugiat. Nullam volutpat est urna, iaculis finibus felis finibus nec. Curabitur ut vestibulum enim. Phasellus at iaculis metus.
Nulla ac porta purus. Nullam sit amet mi non massa pharetra convallis a vel urna. Aenean a aliquam nisi. Cras vehicula interdum dui et convallis. Praesent quis justo tempor, semper felis sit amet, finibus arcu. Quisque posuere luctus eros aliquam convallis. Integer dictum et dui tristique blandit. Nam efficitur sodales eros sed vulputate. Aliquam eget ex mattis, congue orci ac, euismod magna. Donec egestas placerat laoreet. Nam a mi purus. Aliquam erat volutpat. Praesent aliquet, nisl at tempus fermentum, justo diam tempor orci, at hendrerit diam felis ac libero. Aliquam erat volutpat. Proin lobortis enim odio, sed mollis sapien semper eu. Etiam porta orci nisi.
In hac habitasse platea dictumst. Vestibulum efficitur sed dolor at viverra. Duis consectetur sed eros in volutpat. Donec condimentum dolor non faucibus ultrices. Nunc ornare eros at arcu volutpat hendrerit. Fusce ut varius lacus, sed eleifend mauris. Quisque tortor quam, condimentum ut erat vitae, placerat congue erat. Sed in felis purus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean sed dictum diam. Etiam ullamcorper turpis at consectetur lobortis. Suspendisse ultrices, purus et facilisis molestie, quam dui placerat lacus, nec tempor turpis felis id elit. Pellentesque vulputate tortor vitae efficitur ullamcorper. Quisque rhoncus erat eu velit eleifend tempus. Etiam non metus vel erat venenatis tincidunt. Vivamus eu sapien sed enim eleifend rhoncus.
Pellentesque dignissim purus a arcu venenatis, vel finibus metus tempus. Cras hendrerit feugiat est non semper. Morbi egestas arcu id justo lobortis feugiat. Praesent sollicitudin sollicitudin semper. Maecenas faucibus non nisl vitae luctus. Cras semper non nisl vitae fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus eu posuere ipsum. Proin viverra laoreet risus, fermentum interdum risus ultrices vitae. Aliquam ultricies lorem vitae massa gravida, ut dapibus nisi tristique. Phasellus in tellus finibus, volutpat risus ut, bibendum nibh. In a venenatis mi, id eleifend nunc. Donec quis nisi nec erat dictum rhoncus sed nec velit. Nunc viverra nisi quis facilisis imperdiet.
Cras id turpis ac nunc pharetra posuere eu quis sem. Suspendisse luctus, ex eget aliquet ultrices, diam magna luctus nisi, maximus facilisis ex lectus vitae enim. Donec varius justo a justo suscipit, ac lacinia urna aliquet. Curabitur elementum vehicula mauris, non consequat mauris dictum nec. Integer convallis pulvinar ex, in accumsan lectus. Vivamus lacinia augue at eros sodales suscipit. Mauris ullamcorper urna nec tristique suscipit. Sed sed felis pretium, ultricies orci sit amet, scelerisque nisl.
Fusce laoreet magna ligula, sit amet tristique turpis varius nec. Vivamus quis turpis semper, rhoncus mauris vel, congue enim. Pellentesque nibh nulla, bibendum sed dapibus vitae, scelerisque ullamcorper diam. Donec viverra hendrerit nisi, sed sollicitudin libero iaculis et. Praesent sit amet velit mi. Ut semper libero a finibus pretium. Ut molestie purus eget rutrum blandit. Aenean tincidunt enim a nisi malesuada, viverra semper nibh eleifend. Maecenas tincidunt quis risus a pellentesque. Duis sodales purus dolor, id malesuada lorem dapibus eget.
Nam ultricies dignissim erat quis varius. Donec at aliquam enim, ut auctor magna. Duis nunc est, bibendum non nisl vitae, congue blandit erat. Duis bibendum sed neque ut lobortis. Duis nisi lacus, dapibus quis sapien sed, vestibulum volutpat elit. Phasellus ex neque, tincidunt a quam fermentum, tincidunt luctus velit. Sed luctus, quam vel convallis volutpat, mauris lectus sagittis nulla, a vehicula tortor augue sed tellus. </p>
<!-- Add more content as needed -->
</div>
</div>
</div>
</div>
</body>我想对于右边的
div.rightflex.rightdiv {
height: 100vh;
display: flex;
flex-direction: column;
}
.right {
...
flex: 1;
}