gpt4 book ai didi

html - 制作一个 Div 填充页眉和页脚之间的区域

转载 作者:行者123 更新时间:2023-11-27 23:28:00 26 4
gpt4 key购买 nike

首先,我知道这个问题之前已经被问过很多次,并且回答的次数与被问到的次数差不多。不幸的是,我无法获得提供的解决方案here , herehere为我工作。我只使用了几周的 html 和 css,通过 Codecademy 自学。遗憾的是,Codecademy 的定位教程中到处都是错误,所以我这里的代码是反复试验的产物,我不确定其中是否有任何设置“正确”。

事不宜迟,这是我当前的代码:

HTML

<!DOCTYPE html> 
<html>
<head>
<title>Header Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
</html>

CSS

html, body { 
height:100%;
margin: 0;
padding: 0;
}

.wrapper {
min-height: 100%;
position: relative;
}

.header {
height: 75px;
padding: 10px;
background-color: red;
}

.content {
height:100%;
}

.footer {
width:100%;
height: 75px;
bottom: 0;
position: absolute;
background-color: red;
}

这段代码使我成为一个页眉和页脚,它们之间有一个内容 div。但是,内容 div 的高度为 0px。我希望 div 从页眉底部延伸到页脚顶部。

这是一个 JSFiddle我当前的代码。在此先感谢您的帮助。

最佳答案

“现代”方式是使用 flexbox

DEMO

.wrapper { 
min-height: 100%;
position: relative;
display:flex;
flex-direction: column;
justify-content: flex-start;
}


.content {
flex:1;
background:pink;
}

编辑:DEMO USING TABLE

关于html - 制作一个 Div 填充页眉和页脚之间的区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37403685/

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