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

Question

我对CSS和flexbox / div heights有疑问。

我的代码需要兼容IE11 ，最好没有 JS。

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

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

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

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

 /* 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>

Answer 1

使#left 和#right flex 并将#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>

Answer 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>

Answer 3

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

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