使div內的內容可以滾動-有解無憂

我有一個類似于下面的代碼片段的設定。我的目標是將“藍色”和“黃色”div 固定在適當的位置，而“藍色”div 如果包含的行數超過可用空間，則必須是可滾動的。

由于代碼的性質，我無法更改 div 在正文中的位置，也無法硬編碼任何高度（因為標題和條形高度都是在運行時計算的）。

我必須通過更改 CSS 來實作這一點。

使用當前的解決方案，我可以讓黃色的 div 留在原地，而我也不能讓藍色的 div 留在原地而不是跟隨滾動。

body {
  height: 100vh;
  margin: 0;
  background-color: white;
}

.app {
  margin: auto;
  max-height: 100%;
  max-width: 600px;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main {
  background-color: orange;
  overflow: scroll;
}

.title {
  background-color: blue;
}

.rowcontainers {
  background-color: red;
}

.lowerbar {
  background-color: yellow;
  height: 56px;
}

<div class="app">
  <div class="main">
    <div class="title">
      THIS TITLE HAS TO ALWAYS STAY HERE
    </div>
    <div class="rowcontainers">
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
    </div>
  </div>
  <div class="lowerbar">LOWER BAR AS TO ALWAYS STAY HERE</div>
</div>

uj5u.com熱心網友回復：

你只需要在課堂上添加position: sticky;和top:0;.title

body {
  height: 100vh;
  margin: 0;
  background-color: white;
}

.app {
  margin: auto;
  max-height: 100%;
  max-width: 600px;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main {
  background-color: orange;
  overflow: scroll;
}

.title {
  background-color: blue;
  position: sticky;
  top: 0;
}

.rowcontainers {
  background-color: red;
}

.lowerbar {
  background-color: yellow;
  height: 56px;
}

<div class="app">
  <div class="main">
    <div class="title">
      THIS TITLE HAS TO ALWAYS STAY HERE
    </div>
    <div class="rowcontainers">
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
    </div>
  </div>
  <div class="lowerbar">LOWER BAR AS TO ALWAYS STAY HERE</div>
</div>

uj5u.com熱心網友回復：

這是一個用于計算元素calc最大高度的解決方案。rowcontianer您已經表明您想要100vh作為的高度body，以及56px作為的高度lowerbar。我line-height: 1.4rem為title元素添加了一個。

只要title保持單行文本，此代碼就可以作業，并且lowerbar保持56px.

body {
  height: 100vh;
  margin: 0;
  background-color: white;
}

.app {
  margin: auto;
  max-height: 100%;
  max-width: 600px;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main {
  background-color: orange;
}

.title {
  background-color: blue;
  line-height: 1.4rem;
}

.rowcontainers {
  background-color: red;
  max-height: calc(100vh - 56px - 1.4rem); /* 56px (height of lowerbar) 1.4rem (line-height of title) Consider using flexbox methods if you think title may wrap to two lines or lowerbar might grow. */ 
  overflow: scroll;
}

.lowerbar {
  background-color: yellow;
  height: 56px;
}

<div class="app">
  <div class="main">
    <div class="title">
      THIS TITLE HAS TO ALWAYS STAY HERE
    </div>
    <div class="rowcontainers">
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
    </div>
  </div>
  <div class="lowerbar">LOWER BAR AS TO ALWAYS STAY HERE</div>
</div>

更簡單的方法是使用 flexbox：

body {
  height: 100vh;
  margin: 0;
  background-color: white;
  display: flex;
  flex-flow: column nowrap;
}

.app {
  /* Added flex-grow and flex-basis: 100% so that app starts off at 100% height */
  flex: 1 0 100%;
  margin: 0 auto;
  max-width: 600px;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main {
  /* Added flex-grow and flex-basis: calc(100vh - 56px) so that main starts off 
     at 100% height of body less the height of lowerbar. Set the max-height to
     the same so that it doesn't grow too large. Could also set flex-grow to 0.*/
  flex: 1 0 calc(100vh - 56px);
  max-height: calc(100vh - 56px);
  background-color: orange;
  display: flex;
  flex-flow: column nowrap;
}

.title {
  background-color: blue;
  /* The basis is one line, but it should expand as needed */
  flex: 1 0 1.4rem;
}

.rowcontainers {
  background-color: red;
  /* flex-grow is set to 0 so that it doesn't go beyond its container and keeps
     its initial height, allowing scroll to work. */
  flex: 0 0 100%;
  overflow: scroll;
}

.lowerbar {
  background-color: yellow;
  flex: 0 0 56px;
}

<div class="app">
  <div class="main">
    <div class="title">
      THIS TITLE HAS TO ALWAYS STAY HERE, or things get messy really really really really really really really really quickly.
    </div>
    <div class="rowcontainers">
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
    </div>
  </div>
  <div class="lowerbar">LOWER BAR AS TO ALWAYS STAY HERE</div>
</div>

uj5u.com熱心網友回復：

您可以使用display: gridon.app和display: contentson的組合.main來實作此目的。

好處：

適用于您的動態高度。
拉伸以使用整個視口，無論是否.rowcontainers有足夠的內容。
不會使標題看起來像是可滾動內容的一部分（如position: sticky解決方案中所示）。

body {
  margin: 0;
}

.app {
  height: 100vh;
  /* grid stuff: */
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: min-content auto min-content;
}

.main {
  /* skip this tier in the DOM hierarchy for styling */
  display: contents;
}

.title {
  background: #00F;
}

.rowcontainers {
  background: #F00;
  /* scroll when necessary: */
  overflow: auto;
}

.lowerbar {
  background: #FF0;
  height: 56px;
}

/* test scrolling without extra markup */
.rowcontainers::before {
  content: "Start scroll test...";
  display: block;
  height: 300vh;
}
.rowcontainers::after {
  content: "... end scroll test.";
}

<div class="app">
  <div class="main">
    <div class="title">Header</div>
    <div class="rowcontainers"></div>
  </div>
  <div class="lowerbar">Footer</div>
</div>

uj5u.com熱心網友回復：

改變這個：

        .main {
            background-color: orange;
            overflow: scroll;
        }
        .rowcontainers {
            background-color: red;
        }

對此：

        .main {
            background-color: orange;
        }
        .rowcontainers {
            background-color: red;
            overflow: auto;
            max-height: 400px; /*as much as you need*/
        }

uj5u.com熱心網友回復：

<html>

<head>
    <style>
        body {
            height: 100vh;
            margin: 0;
            background-color: white;
        }

        .app {
            margin: auto;
            max-height: 100%;
            max-width: 600px;
            background-color: black;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .main {
            background-color: orange;
            overflow: scroll;
        }

        .title {
            background-color: blue;
        }

        .rowcontainers {
            background-color: red;

            /* new properties below */
            overflow: scroll;
            height: 300px;
        }

        .lowerbar {
            background-color: yellow;
            height: 56px;
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="main">
            <div class="title">
                THIS TITLE HAS TO ALWAYS STAY HERE
            </div>
            <div class="rowcontainers">
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
            </div>
        </div>
        <div class="lowerbar">LOWER BAR AS TO ALWAYS STAY HERE</div>
    </div>
</body>

</html>

我剛剛添加了這個：

.rowcontainers {
    background-color: red;

    /* new properties below */
    overflow: scroll;
    height: 200px;
}

只要瀏覽器可以檢測到溢位，它就應該可以作業。所以，height: auto;行不通

如果你不能設定任何高度，好吧..對不起，我沒有想法

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/519382.html

標籤：htmlcss弹性盒

上一篇：查找選定的單選按鈕狀態

下一篇：PHP提交表單正在破壞我的會話