flexbox 内的 CSS 可滚动 div 超出了父 div

【问题标题】：CSS scrollable div inside flexbox stretches beyond parent divflexbox 内的 CSS 可滚动 div 超出了父 div
【发布时间】：2020-12-15 18:58:02
【问题描述】：

我对@9​​87654321@ 和flexbox / div heights 有疑问。

我的代码需要兼容 IE11，最好不要使用 JS。

我想要实现的目标： 我正在开发一个通常在台式计算机上使用的应用程序。 它有一个带导航的固定页眉（当屏幕尺寸太小时需要动态展开到底部）和一个固定高度的固定页脚。

中间是内容 div。这个 div 总是占用剩余空间。在该内容 div 内部正在更改视图。最常见的一种是两列布局，左侧 div 宽度固定，右侧 div 占据剩余空间。

在这些 div 中可以显示各种元素。例如，搜索框和带有搜索结果的内部可滚动 div 下方。右边也一样。

我的问题是： 我无法让可滚动的 div 留在父容器内（左或右）。根据页眉的高度，它们总是会占用更多的空间。结果是我无法向下滚动到列表中的最后一个元素。

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* RESET END*/

/* BEGIN CUSTOM CSS */
body {
  height: 100vh;
  display: flex;
  flex-flow: column;
  overflow: hidden;
}

#background {
  /*height: 100vh;*/
  background-color: #f1f1f1;
  flex: 1 1 auto;
  overflow: hidden;
}
#background:has(>#fixheader) {
   margin-top: 20px;
}
#content {
  display: flex;
  flex-flow: row;
  height: 100vh;
  overflow: hidden;
}
#fixheader {
  position: absolute;
  top: 50px;
  background-color: teal;
  right: 0;
  left: 0;
}
#header {
  background-color: blue;
  flex: none;
  background: green;
}
#left {
  background-color: gold;
  flex: 0 0 300px;
  overflow: hidden;
}
#right {
  background-color: red;
  flex: 1 1 auto;
  overflow: hidden;
}
#footer {
  background-color: crimson;
  flex: none;
}

.scrollable {
  background: grey;
  overflow-y: scroll;
  height: 100vh;
}
<div id="header">
  <div id="heading">
    Title
  </div>
  <div id="navigation">
    HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3
  </div>
</div>
<div id="background">
  <div id="content">
    <div id="fixheader">
      Some more data, optional
    </div>
    <div id="left">
      <div id ="search">
        <form>
          <input type="text"/>
          <input type="button" value="search"/>
        </form>
      </div>
      <div class="scrollable">
        <table>
          <tr><td>te14xt</td></tr>
          <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>          <tr><td>te14xt</td></tr>
          <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>          <tr><td>te14xt</td></tr>
          <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>
        </table>
      </div>
    </div>
    <div id="right">
      <div class="container">
      <h1>HEADING</h1>
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumv
      </div>
            <div class="scrollable">
        <table>
          <tr><td>te14xt</td></tr>
          <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>
                    <tr><td>te14xt</td></tr>
          <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>          <tr><td>te14xt</td></tr>
          <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>  <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>
          <tr><td>LAST ELEMENT</td></tr>
        </table>
      </div>
    </div>
  </div>
</div>
<div id="footer">
  <div id="statusbar">Username</div>
</div>

【问题讨论】：

    标签： html css flexbox


    【解决方案1】：

    使#left 和#right 弯曲并将#content 高度更改为100%；会解决你的问题，试试吧。

    #content {
  display: flex;
  flex-flow: row;
  height: 100%; 
  overflow: hidden;
}
#left {
  background-color: gold;
  flex: 0 0 300px;
  overflow: hidden;
  display: flex;
  flex-flow: column;
}
#right {
  background-color: red;
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  flex-flow: column;
}

    这里有完整的代码

    /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* RESET END*/

/* BEGIN CUSTOM CSS */
body {
  height: 100vh;
  display: flex;
  flex-flow: column;
  overflow: hidden;
}

#background {
  /*height: 100vh;*/
  background-color: #f1f1f1;
  flex: 1 1 auto;
  overflow: hidden;
}
#background:has(>#fixheader) {
   margin-top: 20px;
}
#content {
  display: flex;
  flex-flow: row;
  height: 100%;
  overflow: hidden;
}
#fixheader {
  position: absolute;
  top: 50px;
  background-color: teal;
  right: 0;
  left: 0;
}
#header {
  background-color: blue;
  flex: none;
  background: green;
}
#left {
  background-color: gold;
  flex: 0 0 300px;
  overflow: hidden;
  display: flex;
  flex-flow: column;
}
#right {
  background-color: red;
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  flex-flow: column;
}
#footer {
  background-color: crimson;
  flex: none;
}

.scrollable {
  background: grey;
  overflow-y: scroll;
  height: 100vh;
}
    <div id="header">
  <div id="heading">
    Title
  </div>
  <div id="navigation">
    HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3
  </div>
</div>
<div id="background">
  <div id="content">
    <div id="fixheader">
      Some more data, optional
    </div>
    <div id="left">
      <div id ="search">
        <form>
          <input type="text"/>
          <input type="button" value="search"/>
        </form>
      </div>
      <div class="scrollable">
        <table>
          <tr><td>te14xt</td></tr>
          <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>          <tr><td>te14xt</td></tr>
          <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>          <tr><td>te14xt</td></tr>
          <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>
        </table>
      </div>
    </div>
    <div id="right">
      <div class="container">
      <h1>HEADING</h1>
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      </div>
            <div class="scrollable">
        <table>
          <tr><td>te14xt</td></tr>
          <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>
                    <tr><td>te14xt</td></tr>
          <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>          <tr><td>te14xt</td></tr>
          <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>  <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>
          <tr><td>LAST ELEMENT</td></tr>
        </table>
      </div>
    </div>
  </div>
</div>
<div id="footer">
  <div id="statusbar">Username</div>
</div>

    【讨论】：

      【解决方案2】：

      应用以下 CSS

      #background {
  display: flex;
}
#content {
  /*height: 100vh; */
}
#left {
  display:flex;
  flex-direction:column;
}
.scrollable {
  /*height: 100vh; */
  flex-grow:1;
}

      完整代码：

      /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* RESET END*/

/* BEGIN CUSTOM CSS */
body {
  height: 100vh;
  display: flex;
  flex-flow: column;
  overflow: hidden;
}

#background {
  /*height: 100vh;*/
  background-color: #f1f1f1;
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
}
#background:has(>#fixheader) {
   margin-top: 20px;
}
#content {
  display: flex;
  flex-flow: row;
  /*height: 100vh; */
  overflow: hidden;
}
#fixheader {
  position: absolute;
  top: 50px;
  background-color: teal;
  right: 0;
  left: 0;
}
#header {
  background-color: blue;
  flex: none;
  background: green;
}
#left {
  background-color: gold;
  flex: 0 0 300px;
  overflow: hidden;
  display:flex;
  flex-direction:column;
}
#right {
  background-color: red;
  flex: 1 1 auto;
  overflow: hidden;
}
#footer {
  background-color: crimson;
  flex: none;
}

.scrollable {
  background: grey;
  overflow-y: scroll;
  /*height: 100vh; */
  flex-grow:1;
}
      <div id="header">
  <div id="heading">
    Title
  </div>
  <div id="navigation">
    HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3
  </div>
</div>
<div id="background">
  <div id="content">
    <div id="fixheader">
      Some more data, optional
    </div>
    <div id="left">
      <div id ="search">
        <form>
          <input type="text"/>
          <input type="button" value="search"/>
        </form>
      </div>
      <div class="scrollable">
        <table>
          <tr><td>te14xt</td></tr>
          <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>          <tr><td>te14xt</td></tr>
          <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>          <tr><td>te14xt</td></tr>
          <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>
        </table>
      </div>
    </div>
    <div id="right">
      <div class="container">
      <h1>HEADING</h1>
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumv
      </div>
            <div class="scrollable">
        <table>
          <tr><td>te14xt</td></tr>
          <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>
                    <tr><td>te14xt</td></tr>
          <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>          <tr><td>te14xt</td></tr>
          <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>  <tr><td>te13xt</td></tr>
          <tr><td>te12xt</td></tr>
          <tr><td>t11ext</td></tr>
          <tr><td>t10ext</td></tr>
          <tr><td>text9</td></tr>
          <tr><td>tex8t</td></tr>
          <tr><td>te7xt</td></tr>
          <tr><td>text6</td></tr>
          <tr><td>tex5t</td></tr>
          <tr><td>te4xt</td></tr>
          <tr><td>text3</td></tr>
          <tr><td>tex2t</td></tr>
          <tr><td>te1xt</td></tr>
          <tr><td>LAST ELEMENT</td></tr>
        </table>
      </div>
    </div>
  </div>
</div>
<div id="footer">
  <div id="statusbar">Username</div>
</div>

      【讨论】：

      • 谢谢！此解决方案有效。我还不太明白它是如何工作的。但这正是我想要的。
      【解决方案3】：

      将此添加到 CSS 文件中。您将能够滚动到最后。

      .scrollable table{
  margin-bottom: 25vh;
}

      【讨论】：

      • 感谢您的回答。不知何故，这在调整浏览器窗口大小时不起作用。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-09-06
      • 1970-01-01
      • 1970-01-01
      • 2017-11-28
      • 2018-07-20
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode