Html 如何标记我的css，使该元素达到其应有的高度
要使.body元素伸展并占用包装中的所有可用空间，我必须做什么？基本上，我希望看到容器底部的页脚。我原以为添加flex grow属性可以解决问题，但没有Html 如何标记我的css，使该元素达到其应有的高度,html,css,flexbox,Html,Css,Flexbox,要使.body元素伸展并占用包装中的所有可用空间，我必须做什么？基本上，我希望看到容器底部的页脚。我原以为添加flex grow属性可以解决问题，但没有 <html> <head> <meta charset="utf-8"> <title> Learning Flexbox </title> <link rel="stylesheet" href="flexbox.css"> </he
<html>
<head>
<meta charset="utf-8">
<title> Learning Flexbox </title>
<link rel="stylesheet" href="flexbox.css">
</head>
<body>
<h1> CSS Flexbox Practical Examples </h1>
<div class="example">
<h2>3 Column layout</h2>
<div class="example-page example-layout">
<header>Header</header>
<div class="body">
<div class="col1"> Main Content </div>
<div class="col2"> Navigation </div>
<div class="col3"> Sidebar </div>
</div>
<footer> Footer </footer>
</div>
</div>
</body>
</html>
h1 {
text-align: center;
}
.example-page {
min-height: 45px;
padding: 2em;
}
.example {
border: 2.5px solid black;
}
h2 {
text-align: center;
font-size: 1em;
margin: 0;
padding: 0;
background-color: black;
color: white;
}
.example-layout {
display: flex
flex-direction: column;
height: 300px;
}
header, footer {
padding: 20px;
background: #666;
color: white;
}
.body {
display: flex;
flex-grow: 1;
}
学习Flexbox
CSS Flexbox实用示例
3列布局
标题
主要内容
航行
边栏
页脚
h1{
文本对齐：居中；
}
.示例页{
最小高度：45px；
填料：2米；
}
.举例{
边框：2.5px纯黑；
}
氢{
文本对齐：居中；
字号：1em；
保证金：0；
填充：0；
背景色：黑色；
颜色：白色；
}
.示例布局{
显示器：flex
弯曲方向：立柱；
高度：300px；
}
页眉、页脚{
填充：20px；
背景:#666；
颜色：白色；
}
.身体{
显示器：flex；
柔性生长：1；
}
box size:border box* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
.example-page {
min-height: 45px;
padding: 2em;
}
.example {
border: 2.5px solid black;
}
h2 {
text-align: center;
font-size: 1em;
margin: 0;
padding: 0;
background-color: black;
color: white;
}
.example-layout {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 300px;
}
header, footer {
padding: 20px;
background: #666;
color: white;
}
谢谢你迄今为止的回答。我真的很感激！然而，我找到了解决问题的办法。我只是错过了display之后的分号：flex in.example布局。NOOB错误。再次感谢。下次我会更敏锐。缺少分号
.example-layout {
display: flex;
flex-direction: column;
height: 300px;
}
您有一个很小的语法错误。你的代码是正确的。看答案。哈哈，是的，我刚刚注意到了。谢谢，我们大家都会这样。根据您使用的文本编辑器或IDE，我建议使用CSS linter进行语法检查！将增加您的工作流程！！我甚至不知道它的存在！非常感谢。哦，谢谢！注意到了。身体标记。我不会使用它。也要欣赏资源；伟大的资源！