创建 CSS
- 设置 <html> 和 <body> 元素的高度和边距。
- 将显示设置为“flex”，并为“box”类添加 flex-flow 和 height 属性。
- 为“box.row”设置边框。
- 分别为“行标题”、“行内容”和“行页脚”类设置 flex 属性。
html,
body {
height: 100%;
margin: 0;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted #0313fc;
}
.box .row.header {
flex: 0 1 auto;
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
让我们看看最终的代码。
使 <div> 用 Flexbox 填充剩余空间的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
html,
body {
height: 100%;
margin: 0;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted #0313fc;
}
.box .row.header {
flex: 0 1 auto;
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
</style>
</head>
<body>
<div class="box">
<div class="row header">
<p>header (sized to content)</p>
</div>
<div class="row content">
<p>content (fills remaining space)</p>
</div>
<div class="row footer">
<p>footer (fixed height)</p>
</div>
</div>
</body>
</html>
使用 flexbox，我们可以在具有固定尺寸、内容尺寸或者剩余空间尺寸的行和列之间切换。
在上面的示例中，我们演示了如何添加固定高度的区域并设置用于填充剩余空间的内容区域。
- 另一种使 <div> 填充剩余空间的方法是使用 CSS 位置属性。
只需将位置设置为“绝对”即可拉伸 <div>。
使 <div> 用 position 属性填充剩余空间的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
#fixed-height {
height: 100px;
background-color: #57c975;
}
#remaining-height {
background-color: #d9deda;
position: absolute;
top: 100px;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="fixed-height">
Fixed height
</div>
<div id="remaining-height">
Remaining height
</div>
</body>
</html>
- 使 <div> 填充剩余空间的下一个方法是使用表格。
通过将 display 属性设置为“table”，我们可以分配给定的空间。
当我们为一个元素设置固定高度时，另一个将使用剩余的空间。
这种方法可能会导致布局出现一些问题。
使 <div> 填充剩余空间并将显示设置为“table”的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
html,
body,
#outer {
height: 100%;
width: 100%;
margin: 0;
}
#outer {
display: table;
}
#fixed-height {
height: 100px;
background-color: #ebcaca;
display: table-row;
}
#remaining-height {
background-color: #ebe6e6;
display: table-row;
}
</style>
</head>
<body>
<div id="outer">
<div id="fixed-height">
Fixed height
</div>
<div id="remaining-height">
Remaining height
</div>
</div>
</body>
</html>
- 最后一种方法是使用CSS calc() 函数。
通过这种方式，我们可以分配一个高度，该高度由总高度减去另一个元素的高度计算得出。
使用 calc() 函数使 <div> 填充剩余空间的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
#fixed-height {
height: 100px;
background-color: #ebcaca;
}
#remaining-height {
background-color: #ebe6e6;
height: calc(100% - 100px);
}
</style>
</head>
<body>
<div id="fixed-height">
Fixed height
</div>
<div id="remaining-height">
Remaining height
</div>
</body>
</html>
创建 HTML
- 使用 <div> 并在里面添加其他三个 <div> 元素。
- 向 <div> 元素添加类属性。
- 在 <div> 标签内添加 <p> 元素。
<div class="box">
<div class="row header">
<p>header (sized to content)</p>
</div>
<div class="row content">
<p>content (fills remaining space)</p>
</div>
<div class="row footer">
<p>footer (fixed height)</p>
</div>
</div>
如果我们需要内容来填充全屏的高度，那么我们来对地方了。
在这个片段中，我们将演示四种使 <div> 填充剩余空间高度的方法。
- 解决这个问题最常用的方法是使用 Flexbox。
让我们看看如何使用它。
对于这种方法，我们需要 CSS flex 属性作为 flex-grow、flex-shrink 和 flex-basis 属性的简写。
日期：2020-06-02 22:15:09 来源：oir作者：oir