Question

给出...

<html>
   <body>
      <div id="row1">...</div>
      <div id="row2" style="overflow-y: scroll;">...</div>
   </body>
</html>

鉴于row2的内容比剩余的垂直空间高，我如何将row2的底部固定到视口的底部，以便div滚动以显示包含的内容？ / p>

row1的高度因其内容而异。

Answer 1

body{
    width:100%;
    height:100%;
    margin: 0 auto;
}

row1{
    position:relative;
    max-height:50%;
    height:100%;
}

row2{
    position:fixed;
    max-height:50%;
    height:100%;
    overflow-y:scroll;
}

<html>
   <body>
      <div id="row1">...</div>
      <div id="row2" style="overflow-y: scroll;">...</div>
   </body>
</html>

将div的底部固定到屏幕的底部

1 个答案: