简单的响应式 html 高度问题答案

【问题标题】：Simple responsive html height issue简单的响应式 html 高度问题
【发布时间】：2014-02-03 18:33:28
【问题描述】：

我正在创建一个简单的响应式 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 css sticky-footer

【解决方案1】：

问题您已在 html 中将 footer 设置为 # (id)，但在 css 中，您已将其定义为 .(class)

你 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%;
    }

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

【讨论】：

重点是，我需要它是 100% 高度，从下一个元素（例如）15% 页脚，15% 页眉，70% 正文（最小高度），所以我的元素将始终比例一样……
@JognSmit ：更新了答案和小提琴...检查它是否有帮助！
NoobEditor，我猜你的 jsfiddle 搞砸了？页脚在左侧？
@JognSmit 他的意思是 max-height 设置了 body 和 html 高度的限制，但它没有向浏览器定义该高度是多少。为了使子元素的百分比起作用，它们的父元素必须具有定义的高度。 html 和 body 需要定义 100% 的高度，以便以下元素知道它们的 15% 15% 和 70% 是什么。
@JognSmit : 伙计，我希望你在告诉我我的小提琴搞砸之前对基本的 css 有一些了解......看这个小提琴中的绿色边框，那是footer => jsfiddle.net/7E338/2我没有在中心对齐文本或链接你的图像！ :D

【解决方案2】：

我认为您正在寻找的是一个粘性页脚。在Chris Coyer - Sticky Footer example 中解释得很清楚。使用并适应您想要的方式。希望这篇文章对您有所帮助。

【讨论】：

这不会弄乱响应点吗？如果我固定页脚的高度？