gpt4 book ai didi

html - 如何使页眉和页脚之间的DIV高度为100%

转载 作者:技术小花猫 更新时间:2023-10-29 12:07:47 24 4
gpt4 key购买 nike

有没有办法设置一个布局,使页眉为 50px,正文为 100%,页脚为 50px?

我希望 body 至少用完整个可视区域。我希望页脚和页眉始终显示在屏幕上

最佳答案

我在 jsfiddle 中创建了一个示例:

更新 JsFiddle:http://jsfiddle.net/5V288/1025/

HTML:

<body>
<div id="header"></div>
<div id="content"><div>
Content
</div></div>
<div id="footer"></div>
</body>

CSS:

html { height: 100%; }
body {
height:100%;
min-height: 100%;
background: #000000;
color: #FFFFFF;
position:relative;
}
#header {
height:50px;
width:100%;
top:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#footer {
height:50px;
width:100%;
bottom:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:100%;
padding: 0 20px;
}
#content > div {
padding: 70px 0;
}

如果没有边框,内容将为高度 100% + 140px 填充。使用边框框,内容高度将为 100%,填充将在内部。

关于html - 如何使页眉和页脚之间的DIV高度为100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10228280/

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