本文介绍三种实现固定顶部和底部布局的方法：使用CSS表格、viewport单位及Flexbox。这些技巧有助于开发者更好地控制网页元素的位置。
解决方案：#1：css表：
html,body
{
height:100%;
width:100%;
}
body
{
display:table;
}
#top, #bottom
{
width: 100%;
background: yellow;
display:table-row;
}
#top
{
height: 50px;
}
#bottom
{
background: lightgrey;
height:100%;
}
解决方案#2：使用calc和viewport单位
#top
{
height: 50px;
background: yellow;
}
#bottom
{
background: lightgrey;
height: calc(100vh - 50px);
}
解决方案#3 – Flexbox
html, body
{
height: 100%;
}
body
{
display: flex;
flex-direction: column;
}
#top
{
height: 50px;
background: yellow;
}
#bottom
{
background: lightgrey;
flex:1;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
