响应式固定页眉和粘性页脚存在问题答案

【问题标题】：Having issues for a responsive fixed header and sticky footer响应式固定页眉和粘性页脚存在问题
【发布时间】：2014-11-05 19:51:08
【问题描述】：

我在修复标题时遇到问题。我已经设法使页脚具有粘性和响应性，现在我希望页眉固定并对不同的屏幕尺寸做出响应。这是我到目前为止所尝试的：

现场演示 http://jsbin.com/vevay/1/edit?html,css,output

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Sticky Footer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

 <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

</head>
<body class="container"> 
    <div class="block header_block">
        <h1>Responsive Fixed Header</h1> 
    </div>


    <div class="block push body_block">
        <h2>Body Content</h2> 

    </div> 

    <div class="block footer_block">
        <h2>Responsive The Sticky Footer</h2> 
        <h1>cool</h1>  
    </div>
</body>
</html>

CSS 代码

html {
    height: 100%;
}
.container {
    display: table;
    height: 100%;
}
.block {
    display: table-row;
    height: 1px;
}

.push {
    height: auto;
}

.container {
    width: 100%;
    margin: 0 auto;
}
.block:nth-child(odd) { 
}

.header_block{
    background: grey;
}

.body_block{
    background: lightblue;
 }

.footer_block{
        background: green;

}

更新：

我在发布这个问题之前做了一些研究，他们是this one，但页脚没有响应，这就是我发布这个问题的原因。

编辑

我想出了另一个解决方案：http://jsbin.com/gevafi/2/edit，但我在页脚底部仍然留有边距。

编辑 2

临时解决方案：http://jsbin.com/vokiqi/1/edit?html,css,output

【问题讨论】：

当我调整你的 jsbin 的输出窗口大小时，内容都调整好了，所以我不确定是什么问题？
我希望在滚动时修复标题
通常您只需将标题设置为固定位置。但是你会有点挣扎，因为你使用的是表格。
@chdltest 我尝试了一个固定的位置，但它不起作用
我通过为您编辑我的答案，为您的置顶页脚添加了一个新的解决方案。

标签： html css responsive-design

【解决方案1】：

决定怜悯你，从零开始为你创造一个：http://jsfiddle.net/yo2ukrua/3/

我没有使用表格，而是删除了所有表格并将它们保留为块。对于您的设置，您实际上并不需要任何表格，我猜您只是使用它来使您的页脚粘在底部。

一旦他们回到块，你可以给页脚和页眉一个固定的位置，将页脚设置在底部，将页眉设置在顶部。

然后对正文应用一个顶部和底部边距，边距应该是页脚和页眉的高度。

CSS：

.header_block {
      background: grey;
      position: fixed;
      width: 100%;
      top: 0px;
}

    .body_block {
      background: lightblue;
      margin-bottom: 18px; /* height of your footer */
      margin-top: 18px; /* height of your header */
     }

    .footer_block {
      background: green;
      bottom: 0px;
      position: fixed;
      width: 100%;
    }

HTML：

<body class="container"> 
  <div class="block header_block">
    <h1>Responsive Fixed Header</h1> 
  </div>
  <div class="block push body_block">
    <h2>Body Content<br>Body Content<br>Body Content <br>Body Content <br>Body Content<br>Body Content<br>Body Content<br>Body Content</h2> 
  </div> 
  <div class="block footer_block">
    <h2>Responsive The Sticky Footer</h2> 
    <h1>cool</h1>  
  </div>
</body>

或者，你可以有一个更好的页脚

http://jsfiddle.net/yo2ukrua/15/

它使用具有窗口大小最小高度的 div（push），但如果窗口大小小于内容（创建滚动），则它使用内容本身的高度，因此总是将页脚推到底部。页脚还保留相对位置。

【讨论】：

感谢您决定怜悯我 :) 。我刚刚测试了您在此处发布之前偶然发现的解决方案。这个解决方案的问题是页脚总是固定在底部。换句话说，页脚始终可见。那不是我想要的。感谢您的尝试。
那么你有其他选择来解决这个问题。您可以将页脚设置为绝对而不是固定，然后如果屏幕在高度方面太小，则使用 JS 将其设置为相对。接下来是将其设置为相对，并为 body/html 提供 100% 的高度，然后将高度 100% 应用于 div。
我不想为此使用 JS。我想出了这个jsbin.com/gevafi/1/edit?html,css,output，但它们是页脚底部的边距
好的，我不知道 jsfiddle 如何显示您编辑的解决方案，但这不起作用。我下载了代码，在 chrome 和 firefox 上对其进行了测试，但它不起作用（页脚）。您是否在没有 jsfiddle 的情况下使用浏览器对此进行了测试？
jsfiddle 正在使用您应该拥有的规范化样式表（这是一个重置，以使所有浏览器彼此尽可能相似）。除此之外，请注意 div 和类。我搬了一些东西。另外，让我知道最新 jsfiddle 中的解决方案是否正确。（只是为了确保，这是这个链接jsfiddle.net/yo2ukrua/15）