Three-row 模态与 header、底行和可滚动的中间行固定
Three-row modal with fixed with header, bottom row, and scrollable middle row
我正在尝试创建一个具有顶部、中间和底部的模式。顶部始终固定高度。
底部必须 "glued" 到底部并且可能会有所不同。其中的所有内容和元素都必须从底部构建。因此,如果只有一行文本,底部将是该行的高度。如果有3行或4行文字,底部会根据需要向上推。
中间需要全部填满,和如果内容overflow-y
必须显示滚动条且不干扰顶部或最后一行。
我该怎么做?我发现当我尝试 overflow-y: auto
时它不起作用,大概是因为没有高度,而是它将 table 推到 #wrap
div 的范围之外。
这是一个 CodePen:https://codepen.io/sfullman/pen/XGZoJb
body{
font-family: Arial;
}
.table{
display: table;
height: 100%;
width: 100%;
}
.row{
display: table-row;
}
.cell{
display: table-cell;
width: 75%;
}
#top{
background-color: burlywood;
height: 41px;
}
#middle .cell{
overflow-y: scroll;
}
#bottom{
height: 15px; /* make this height less than expected height, table row/cell behavior will successfully exceed it an push content up */
border-top: 1px solid darkred;
background-color: rgba(0,0,0,.15);
}
#wrap{
/* this div is designed to be a dialog/modal and will normally be abs. positioned */
border: 1px solid darkred;
width: 425px;
height: 300px;
position: absolute;
top: 20px;
left: 20px;
}
<div id="wrap">
<div id="innerTable" class="table">
<div id="top" class="row">
<div class="cell">
top
</div>
</div>
<div id="middle" class="row">
<div class="cell">
middle<br>
middle<br>
middle<br>
middle<br>
middle<br>
middle<br>
middle<br>
middle<br>
middle<br>
middle<br>
middle<br>
middle<br>
</div>
</div>
<div id="bottom" class="row">
<div class="cell">
bottom<br>
bottom<br>
bottom<br>
</div>
</div>
</div>
</div>
我已经使用 flexbox 创建了一个示例:https://codepen.io/jgoncalves/pen/XGEqoj
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
overflow: auto;
}
body {
font-family: sans-serif;
font-size: 20px;
line-height: 50px;
text-transform: uppercase;
font-weight: bold;
}
.header {
text-align: center;
color: #fff;
background: #444;
}
.footer {
padding: 6px 20px;
background: #004141;
color: #fff;
}
.content {
background: #ddd;
}
<div class="container">
<div class="main">
<div class="header">Main header Main headerMain headerMain headerMain headerMain headerMain headerMain header</div>
<div class="content">
Scroll me Scroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll me
</div>
<div class="footer">Footer end of page. Footer end of page. Footer end of page. Footer end of page. Footer end of page. Footer end of page. Footer end of page. Footer end of page. </div>
</div>
</div>
中心行滚动,同时具有不同高度的固定页眉和固定页脚。
想法是使用 column flexbox 和 max-height
设置来填充其所在的容器 - 请参见下面的演示以了解全视口设置(这是基于 ):
body {
margin: 0;
}
*{
box-sizing: border-box;
}
.row {
display: flex;
flex-direction: column;
max-height: 100vh;
}
.flex {
flex: 1;
overflow-y: auto;
}
.row, .row > * {
border: 1px solid;
}
<div class="row">
<div>some content</div>
<div class="flex">This fills the available space</div>
<!-- fills/grows available space -->
<div>another content</div>
</div>
请注意,header
和 footer
的高度可以在此处 动态变化 - 即使您没有固定高度,这也有效.对于更复杂的布局,但是较新的 CSS Grid layouts
are preferred as flexboxes are 1D layouts while CSS Grid is a 2D layouting solution - see one example here
解决方案
现在我将根据您的代码进行调整 - 看看当 middle
部分中有很多内容时它是如何工作的:
body {
font-family: Arial;
}
.table {
display: flex;
flex-direction: column;
max-height: 100%;
width: 100%;
}
.cell {
width: 75%;
}
#top {
background-color: burlywood;
}
#middle {
flex: 1;
overflow-y: auto;
}
#bottom {
border-top: 1px solid darkred;
background-color: rgba(0, 0, 0, .15);
}
#wrap {
border: 1px solid darkred;
width: 425px;
height: 300px;
position: absolute;
top: 20px;
left: 20px;
}
<div id="wrap">
<div id="innerTable" class="table">
<div id="top" class="row">
<div class="cell">
top
</div>
</div>
<div id="middle" class="row">
<div class="cell">
middle<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
</div>
</div>
<div id="bottom" class="row">
<div class="cell">
bottom
</div>
</div>
</div>
</div>
现在看看当 middle
部分的内容非常少时它是如何工作的——注意 footer
部分是如何 粘 到底部的:
body {
font-family: Arial;
}
.table {
display: flex;
flex-direction: column;
max-height: 100%;
width: 100%;
}
.cell {
width: 75%;
}
#top {
background-color: burlywood;
}
#middle {
flex: 1;
overflow-y: auto;
}
#bottom {
border-top: 1px solid darkred;
background-color: rgba(0, 0, 0, .15);
}
#wrap {
border: 1px solid darkred;
width: 425px;
height: 300px;
position: absolute;
top: 20px;
left: 20px;
}
<div id="wrap">
<div id="innerTable" class="table">
<div id="top" class="row">
<div class="cell">
top
</div>
</div>
<div id="middle" class="row">
<div class="cell">
middle<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
</div>
</div>
<div id="bottom" class="row">
<div class="cell">
bottom
</div>
</div>
</div>
</div>
在网上搜索后,我在 JS fiddle 上找到了一些东西,然后我修改它来创建解决方案 here
这里是 HTML:
<div id="body">
<div id="head">
<!-- if your have content larger than declared height here, it will simply roll under the bottom with no scrolling -->
<p>Fixed size without scrollbar 1</p>
<p>Fixed size without scrollbar 2</p>
<p>Fixed size without scrollbar 3</p>
<p>Fixed size without scrollbar 4</p>
</div>
<div id="content">
<!--
add or remove these to see scrool/non-scroll behavior
-->
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<!--
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
-->
</div>
<div id="foot">
<!-- this content will build from the bottom, pushing the top wall up. #content's bottom will adjust up accordingly -->
<p>Dynamic size without scrollbar 1</p>
<p>Dynamic size without scrollbar 2</p>
<p>Dynamic size without scrollbar 3</p>
</div>
</div>
和 CSS:
#body {
position: absolute;
top: 15px;
left: 15px;
height: 300px;
width: 500px;
outline: black dashed 1px;
display: flex;
flex-direction: column;
}
#head {
/*border: blue solid 1px;*/
background-color: rgba(0,0,255,0.25);
height: 50px;
flex-shrink: 0;
}
#content{
/*border: red solid 1px;*/
background-color: palegoldenrod;
overflow-y: auto;
height: 100%;
}
#foot {
/*border: green solid 1px;*/
background-color: whitesmoke;
flex-shrink: 0;
}
我正在尝试创建一个具有顶部、中间和底部的模式。顶部始终固定高度。
底部必须 "glued" 到底部并且可能会有所不同。其中的所有内容和元素都必须从底部构建。因此,如果只有一行文本,底部将是该行的高度。如果有3行或4行文字,底部会根据需要向上推。
中间需要全部填满,和如果内容overflow-y
必须显示滚动条且不干扰顶部或最后一行。
我该怎么做?我发现当我尝试 overflow-y: auto
时它不起作用,大概是因为没有高度,而是它将 table 推到 #wrap
div 的范围之外。
这是一个 CodePen:https://codepen.io/sfullman/pen/XGZoJb
body{
font-family: Arial;
}
.table{
display: table;
height: 100%;
width: 100%;
}
.row{
display: table-row;
}
.cell{
display: table-cell;
width: 75%;
}
#top{
background-color: burlywood;
height: 41px;
}
#middle .cell{
overflow-y: scroll;
}
#bottom{
height: 15px; /* make this height less than expected height, table row/cell behavior will successfully exceed it an push content up */
border-top: 1px solid darkred;
background-color: rgba(0,0,0,.15);
}
#wrap{
/* this div is designed to be a dialog/modal and will normally be abs. positioned */
border: 1px solid darkred;
width: 425px;
height: 300px;
position: absolute;
top: 20px;
left: 20px;
}
<div id="wrap">
<div id="innerTable" class="table">
<div id="top" class="row">
<div class="cell">
top
</div>
</div>
<div id="middle" class="row">
<div class="cell">
middle<br>
middle<br>
middle<br>
middle<br>
middle<br>
middle<br>
middle<br>
middle<br>
middle<br>
middle<br>
middle<br>
middle<br>
</div>
</div>
<div id="bottom" class="row">
<div class="cell">
bottom<br>
bottom<br>
bottom<br>
</div>
</div>
</div>
</div>
我已经使用 flexbox 创建了一个示例:https://codepen.io/jgoncalves/pen/XGEqoj
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
overflow: auto;
}
body {
font-family: sans-serif;
font-size: 20px;
line-height: 50px;
text-transform: uppercase;
font-weight: bold;
}
.header {
text-align: center;
color: #fff;
background: #444;
}
.footer {
padding: 6px 20px;
background: #004141;
color: #fff;
}
.content {
background: #ddd;
}
<div class="container">
<div class="main">
<div class="header">Main header Main headerMain headerMain headerMain headerMain headerMain headerMain header</div>
<div class="content">
Scroll me Scroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll me
</div>
<div class="footer">Footer end of page. Footer end of page. Footer end of page. Footer end of page. Footer end of page. Footer end of page. Footer end of page. Footer end of page. </div>
</div>
</div>
中心行滚动,同时具有不同高度的固定页眉和固定页脚。
想法是使用 column flexbox 和 max-height
设置来填充其所在的容器 - 请参见下面的演示以了解全视口设置(这是基于
body {
margin: 0;
}
*{
box-sizing: border-box;
}
.row {
display: flex;
flex-direction: column;
max-height: 100vh;
}
.flex {
flex: 1;
overflow-y: auto;
}
.row, .row > * {
border: 1px solid;
}
<div class="row">
<div>some content</div>
<div class="flex">This fills the available space</div>
<!-- fills/grows available space -->
<div>another content</div>
</div>
请注意,header
和 footer
的高度可以在此处 动态变化 - 即使您没有固定高度,这也有效.对于更复杂的布局,但是较新的 CSS Grid layouts
are preferred as flexboxes are 1D layouts while CSS Grid is a 2D layouting solution - see one example here
解决方案
现在我将根据您的代码进行调整 - 看看当 middle
部分中有很多内容时它是如何工作的:
body {
font-family: Arial;
}
.table {
display: flex;
flex-direction: column;
max-height: 100%;
width: 100%;
}
.cell {
width: 75%;
}
#top {
background-color: burlywood;
}
#middle {
flex: 1;
overflow-y: auto;
}
#bottom {
border-top: 1px solid darkred;
background-color: rgba(0, 0, 0, .15);
}
#wrap {
border: 1px solid darkred;
width: 425px;
height: 300px;
position: absolute;
top: 20px;
left: 20px;
}
<div id="wrap">
<div id="innerTable" class="table">
<div id="top" class="row">
<div class="cell">
top
</div>
</div>
<div id="middle" class="row">
<div class="cell">
middle<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
</div>
</div>
<div id="bottom" class="row">
<div class="cell">
bottom
</div>
</div>
</div>
</div>
现在看看当 middle
部分的内容非常少时它是如何工作的——注意 footer
部分是如何 粘 到底部的:
body {
font-family: Arial;
}
.table {
display: flex;
flex-direction: column;
max-height: 100%;
width: 100%;
}
.cell {
width: 75%;
}
#top {
background-color: burlywood;
}
#middle {
flex: 1;
overflow-y: auto;
}
#bottom {
border-top: 1px solid darkred;
background-color: rgba(0, 0, 0, .15);
}
#wrap {
border: 1px solid darkred;
width: 425px;
height: 300px;
position: absolute;
top: 20px;
left: 20px;
}
<div id="wrap">
<div id="innerTable" class="table">
<div id="top" class="row">
<div class="cell">
top
</div>
</div>
<div id="middle" class="row">
<div class="cell">
middle<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
<br> middle
</div>
</div>
<div id="bottom" class="row">
<div class="cell">
bottom
</div>
</div>
</div>
</div>
在网上搜索后,我在 JS fiddle 上找到了一些东西,然后我修改它来创建解决方案 here
这里是 HTML:
<div id="body">
<div id="head">
<!-- if your have content larger than declared height here, it will simply roll under the bottom with no scrolling -->
<p>Fixed size without scrollbar 1</p>
<p>Fixed size without scrollbar 2</p>
<p>Fixed size without scrollbar 3</p>
<p>Fixed size without scrollbar 4</p>
</div>
<div id="content">
<!--
add or remove these to see scrool/non-scroll behavior
-->
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<!--
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
-->
</div>
<div id="foot">
<!-- this content will build from the bottom, pushing the top wall up. #content's bottom will adjust up accordingly -->
<p>Dynamic size without scrollbar 1</p>
<p>Dynamic size without scrollbar 2</p>
<p>Dynamic size without scrollbar 3</p>
</div>
</div>
和 CSS:
#body {
position: absolute;
top: 15px;
left: 15px;
height: 300px;
width: 500px;
outline: black dashed 1px;
display: flex;
flex-direction: column;
}
#head {
/*border: blue solid 1px;*/
background-color: rgba(0,0,255,0.25);
height: 50px;
flex-shrink: 0;
}
#content{
/*border: red solid 1px;*/
background-color: palegoldenrod;
overflow-y: auto;
height: 100%;
}
#foot {
/*border: green solid 1px;*/
background-color: whitesmoke;
flex-shrink: 0;
}