Question

首先，请阅读整个问题，以便您完全理解我在寻找什么，谢谢！

这是一个我一直在努力研究的问题，现在已经让我退出了一段时间。我可以使用带有固定标题的真正粘性页脚吗？

如何使用固定标头实现粘性页脚？我无法在身体或内容中添加填充或边距，因为这会打破页脚。此外，我希望能够在我的内容中使用width:100%和height: 100%，而不会溢出并造成混乱。

这就是我的目标（请原谅我的Photoshop技巧）：

enter image description here

当我在页脚上使用position:fixed;和bottom:0;时，这看起来不错。但为了使它真正粘，我需要在我的页面添加一些CSS。（来自：http://css-tricks.com/snippets/css/sticky-footer/）

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
}

这让我有一个看起来很棒的粘性页脚，但这就是问题所在。部分内容位于我的固定导航栏下方。

我无法在正文，html或内容中添加填充或边距，因为这会使粘性页脚陷入困境。如果没有CSS“Hacks”，我有什么方法可以做到这一点吗？

这是标题下的内容：http://jsfiddle.net/g2ydV/3/

看起来不错！但是有些内容隐藏在标题下？让我们通过为内容添加一个边距来解决这个问题：http://jsfiddle.net/g2ydV/2/

以上示例有效，但页脚搞砸了。如何在不弄乱粘性页脚的情况下实现此效果？

Answer 1

一个可能的解决方案是将您的content:after换成content:before。

<强> Working Demo

CSS：

/* .content:after {
     content: "";
     display: block;
} */

.content:before {
 content: "";
 display: block;
 height: 45px;
}

Answer 2

使用display: table;和display: table-cell这样做的替代方法似乎越来越受欢迎。

我只是提供它作为值得一看的替代方案。它很干净，并且不需要任何明确的页眉和页脚高度。这很好。

<强> HTML

<div id="wrap">
  <div id="wrap-inner">

    <div class="navbar">
      <span>Fixed Header (content under here)</span>
    </div>

    <div class="content">
      <p>Content Here ... part of this is under the header, i need to see all of it without messing up the sticky footer</p>
    </div>

    <div class="footer">
      <span>Sticky footer!</span>
    </div>

  </div>
</div>

<强> CSS

html, body {
  height: 100%;
}

body {
  margin: 0;
}

#wrap {
  display: table;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

#wrap-inner {
  vertical-align: middle; /* optional for positioning content in the middle */
  display: table-cell;
}

.navbar, .footer {
  position: fixed;
  width: 100%;
}

.navbar {
  top: 0;
  width: 100%;
}

.footer {
  bottom: 0;
}

<强> Demo

Answer 3

这是我对固定标题的决定

html {
    position: relative;
    min-height: 100%;
}

#main-container {
    padding-top: 55px; /*  this is header height  */
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

Answer 4

--Format: mon dd yyyy hh:mmAM (or PM)
--result: Dec 7 2018 4:09PM
SELECT convert(varchar, getdate(), 100)  

--Format: mm/dd/yyyy
--result: 12/07/2018
SELECT convert(varchar, getdate(), 101)

--Format: yyyy.mm.dd
--result: 2018.12.07
SELECT convert(varchar, getdate(), 102)

--Format: dd/mm/yyyy
--result: 07/12/2018
SELECT convert(varchar, getdate(), 103)

--Format: dd.mm.yyyy
--result: 07.12.2018
SELECT convert(varchar, getdate(), 104) 

--Format: dd-mm-yyyy
--result: 07-12-2018
SELECT convert(varchar, getdate(), 105)

--Format: dd mon yyyy
--result: 07 Dec 2018
SELECT convert(varchar, getdate(), 106)

--Format: mon dd, yyyy
--result: Dec 07, 2018
SELECT convert(varchar, getdate(), 107)

--Format: hh:mm:ss
--result: 15:49:24
SELECT convert(varchar, getdate(), 108)

--Format: mon dd yyyy hh:mm:ss:mmmAM (or PM)
--result: Dec 7 2018 3:50:13:540PM
SELECT convert(varchar, getdate(), 109) 

--Format: mm-dd-yyyy
--result: 12-07-2018
SELECT convert(varchar, getdate(), 110)

--Format: yyyy/mm/dd -- yyyymmdd - ISO date format - international standard - works with any language setting
--result: 2018/12/07
SELECT convert(varchar, getdate(), 111)

--Format: yyyymmdd
--result: 20181207
SELECT convert(varchar, getdate(), 112)

--Format: dd mon yyyy hh:mm:ss:mmm
--result: 07 Dec 2018 15:53:14:053
SELECT convert(varchar, getdate(), 113)

--Format: hh:mm:ss:mmm(24h)
--result: 15:54:05:693
SELECT convert(varchar, getdate(), 114)

--Format: yyyy-mm-dd hh:mm:ss(24h)
--result: 2018-12-07 15:54:23
SELECT convert(varchar, getdate(), 120)

--Format: yyyy-mm-dd hh:mm:ss.mmm
--result: 2018-12-07 15:55:15.630
SELECT convert(varchar, getdate(), 121)

--Format: yyyy-mm-ddThh:mm:ss.mmm
--result: 2018-12-07T15:55:44.147
SELECT convert(varchar, getdate(), 126)

--Without century (YY) date / datetime conversion - there are exceptions!

--Format: mon dd yyyy hh:mmAM (or PM)
--result: Dec 7 2018 3:56PM
SELECT convert(varchar, getdate(), 0)

--Format: mm/dd/yy
--result: 12/07/18
SELECT convert(varchar, getdate(), 1)

--Format: yy.mm.dd
--result: 18.12.07
SELECT convert(varchar, getdate(), 2)

--Format: dd/mm/yy
--result: 07/12/18
SELECT convert(varchar, getdate(), 3)

--Format: dd.mm.yy
--result: 07.12.18
SELECT convert(varchar, getdate(), 4)  

--Format: dd-mm-yy
--result: 07-12-18
SELECT convert(varchar, getdate(), 5)

--Format: dd mon yy
--result: 07 Dec 18
SELECT convert(varchar, getdate(), 6)  

--Format: mon dd, yy
--result: Dec 07, 18
SELECT convert(varchar, getdate(), 7)

--Format: hh:mm:ss
--result: 16:02:32
SELECT convert(varchar, getdate(), 8)

--Format: mon dd yyyy hh:mm:ss:mmmAM (or PM)
--result: Dec 7 2018 4:03:02:100PM
SELECT convert(varchar, getdate(), 9)

--Format: mm-dd-yy
--result: 12-07-18
SELECT convert(varchar, getdate(), 10)

--Format: yy/mm/dd
--result: 18/12/07
SELECT convert(varchar, getdate(), 11) 

--Format: yymmdd
--result: 181207
SELECT convert(varchar, getdate(), 12)

--Format: dd mon yyyy hh:mm:ss:mmm
--result: 07 Dec 2018 16:05:07:547
SELECT convert(varchar, getdate(), 13)

--Format: hh:mm:ss:mmm(24h)
--result: 16:05:34:363
SELECT convert(varchar, getdate(), 14)

--Format: yyyy-mm-dd hh:mm:ss(24h)
--result: 2018-12-07 16:06:14
SELECT convert(varchar, getdate(), 20) 

--Format: yyyy-mm-dd hh:mm:ss.mmm
--result: 2018-12-07 16:06:43.970
SELECT convert(varchar, getdate(), 21)

--Format: mm/dd/yy hh:mm:ss AM (or PM)
--result: 12/07/18 4:06:59 PM
SELECT convert(varchar, getdate(), 22)

--Format: yyyy-mm-dd
--result: 2018-12-07
SELECT convert(varchar, getdate(), 23)

--Format: hh:mm:ss
--result: 16:08:11
SELECT convert(varchar, getdate(), 24)

--Format: yyyy-mm-dd hh:mm:ss.mmm
--result: 2018-12-07 16:08:28.353
SELECT convert(varchar, getdate(), 25)

Demo link

一个真正的粘性页脚，固定标题？

4 个答案: