Question

我正在创建一个简单的响应式html模板，只有3行，页眉，正文，页脚和图片的页脚和标题，以及正文的背景图像。现在我的页脚没有固定在底部，我希望我的最大高度为1024px。

以下是图片的外观： enter image description here

这就是我所拥有的： enter image description here

我不知道我的代码有什么问题......我尝试了很多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>

Answer 1

问题您已在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，因此未定义包装器的父elemt的高度，因此它不会t继承浏览器高度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%;
    }

demo

修改

而不是将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%; }

demo

Answer 2

我认为你要找的是一个粘性的页脚。 Chris Coyer - Sticky Footer example清楚地解释了这一点。使用并适应您的需要。希望本文能为您提供帮助。

简单的响应式html高度问题

2 个答案: