Question

我正在尝试实现具有页眉和两个具有最大高度的div框的布局。

页眉为全宽度，并且具有固定的高度。右边的框应保留剩余的高度，并且不能滚动。左框包含标题和长度可变的列表。该框还应该是窗口的最大高度。如果列表比框长，则应显示一个滚动条。

我试图添加“溢出：隐藏到左侧框”和“溢出-y：滚动到内部列表”，但是它不起作用。有人对我有提示吗？

Answer 1

        body {
            margin: 2vh
        }
        
        header {
            position:relative;
            background-color: aquamarine;
            padding: 5vh;
            box-sizing: border-box;
        }
        
        #scrollable, #fixed {
            margin: 2vh 0;
            box-sizing: border-box;
            height: 82vh;
            width: 50%;
            border: 1px solid #000;
            float: left;
            position: relative;
        }
        
        #list {
            /* Reset */
            padding: 0;
            margin: 0;
            
            /* Style */
            box-sizing: border-box;
            height: calc(100% - 10vh - 1px);
            overflow-y: scroll;
            padding: 25px;
            position: relative;
            width: 100%;
        }
        
        #list li{
            padding: 10px 20px;
        }

<!DOCTYPE html>
<html>
  <head>    
    
  </head>

  <body>
      <header></header>

      <main>
          <div id="scrollable">
              <header></header>
              <ul id="list">
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
                  <li>Lorem Ipsum</li>
              </ul>
          </div>

          <div id="fixed">

          </div>
      </main>
  </body>
</html>

让可滚动的Div Box占据剩余高度

1 个答案: