我正在创建一个简单的响应式 html 模板，其中只有 3 行，页眉、正文、页脚和页脚和页眉的图像，以及正文的背景图像。现在我的页脚没有固定在底部，我希望我的最大高度为 1024 像素。
这是一张图片应该是什么样子的:
这是我得到的:
我不知道我的代码有什么问题...我尝试了很多 css 组合。
这是我的完整代码:
<!doctype html>
<html>
<head>
<title>Put your title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
max-height: 1024px;
background-image: url(landing-page3.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.wrapper {
height: 100%;
}
.main {
height: 70%;
}
.header {
height: 15%;
}
.footer {
height: 15%;
}
</style>
</head>
<body>
<div id="wrapper" class="wrapper">
<div id="header">
<img src="headerf.png" style="width:100%;">
</div>
<div id="main">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="footer">
<img src="footer.png" style="width:100%; position: absolute; bottom: 0;">
</div>
</div>
</body>
</html>
最佳答案
问题 您在 html 中将 footer 设置为 # (id)，但在 css 中，您将其定义为 。 (类)
你 css 说:
.footer {
height: 15%;
}
你的 html 说
<div id="footer">
解决方案:
.wrapper {
height: 100%;
border:1px solid red;
position:relative /* added */
}
#footer {
position:absolute; /* added */
height: 15%;
bottom:0; /* added - fix to bottom */
left:0; /* added -for full width */
right:0; /* added -for full width */
}
另外，在你的 html,body 中你设置了 max-height 而不是 height，所以高度包装器的父元素未定义，因此它不会继承浏览器高度的 100%
html, body {
margin: 0;
padding: 0;
width: 100%;
max-height: 1024px;
height: 100%;/*missing*/
background-image: url(landing-page3.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
编辑
然后将 img 放在 footer ....将其设置为 background
#footer {
min-height: 15%; /* will wrap content if it higher than 15% :) */
width:100%;
background-image: url(http://www.smarthosting.rs/footer.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
关于html - 简单的响应式 html 高度问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21523432/