gpt4 book ai didi

html - 尝试创建页眉、内容和页脚的基于 flex 的布局

转载 作者:太空宇宙 更新时间:2023-11-04 01:15:52 25 4
gpt4 key购买 nike

enter image description here

我正在努力实现这种布局。所有三个部分都必须以细线为界。页眉和页脚需要垂直居中。并且内容应该占据高度,直到页脚到达视口(viewport)底部。请注意,细线仅用于显示边界……它们实际上不应该出现在代码中。

到目前为止的工作:

.wrapper{
display: flex;
flex-direction: column;
height: 100vh;
background-color: pink;
}

header, footer, .content{
border: 1px solid black;
}

header, footer {
flex: 0 0 92px;
}

.content{
flex: 1;
}
<div class="wrapper">
<header>Header</header>
<div class="content">Content</div>
<footer>Footer</footer>
</div>

最佳答案

为页眉、内容和页脚设置边距和/或宽度,并将它们与父级的中心对齐

  • 在页眉、内容和页脚的主要容器中添加了嵌套元素。
  • 将页眉、内容和页脚容器的宽度保持为 100%,并为其设置底部边框
  • 为内部 div 添加宽度,并将它们对齐到各自父级的中心

.wrapper{
display: flex;
flex-direction: column;
height: 100vh;
background-color: pink;
align-items: center;
}



header, footer, .content{
margin: auto;
border-bottom: 1px solid black;
width:100%;
}

header .section,footer .section, .content .section{
height:100%;
width:80%;
margin:auto;
background-color:red
}

header, footer {
flex: 0 0 92px;
}

.content{
flex: 1;
}
<div class="wrapper">
<header><div class="section">Header</div></header>
<div class="content"><div class="section">Content</div></div>
<footer><div class="section">Footer</div></footer>
</div>

关于html - 尝试创建页眉、内容和页脚的基于 flex 的布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50167396/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com