Question

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

现场演示 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

Answer 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（推）但如果窗口大小小于内容（创建滚动），则它使用内容本身的高度，因此总是将页脚推到底部。页脚也保留了相对位置。

有响应的固定标题和粘性页脚的问题

1 个答案: