Question

我在Wordpress网站上有两个页面模板，我尝试使用flex CSS创建一个可变高度的粘性页脚。其中一个模板工作正常，但第二个模板有一些问题。

首页模板：

jsfiddle：https://jsfiddle.net/qohprfwe/7/

正如您所看到的，内容从标题下方开始，并将页面填充到页脚下。

HTML：

<header class="header"> </header>

<div class="content"> 
<p>CONTENT STARTS BELOW THE HEADER</p>
</div>

<footer class="footer"> </footer>

</body>

CSS：

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

body {
    min-height: 100%;
    margin: 0; 
    padding: 0; 

    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column; /* works with row or column */
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
} 

.header {
  height:85px;
  width:100%;
  background-color:green;
}

.content {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1; /* STICKY FOOTER WITH DYNAMIC HEIGHT */
  position:relative;
  width: 100%;
  height: auto;
  background-color:yellow;
}

.footer {  
left: 0;
right: 0;
bottom:0;
margin: 0 auto;

height: 85px;
width: 100%; 
background-color:blue;
}

第二页模板：

https://jsfiddle.net/3etssy8m/3/

我设计了第二个页面模板，以便内容从页面的最顶部开始，在页眉下面。因为我使用flex布局来实现粘性页脚，所以我在内容div上使用了position：absolute，以使其位于页眉下方的页面顶部。问题是绝对定位会阻止内容div占用页面的整个高度，就像在第一个模板中设置为position：relative时一样。这意味着除非我在页面中放入足够的内容来填充内容，否则内容不会按预期到达顶部，而是位于页面中间。（这不会发生在jsfiddle中，但是当我使用我的页面构建器插件时，它会在我的网站上发生）

我尝试过使用身高：100％;但是这没有用，有没有什么方法可以让页面填满页面，同时确保它从目前的页面顶部开始？

HTML：

<body>

<header class="header"> </header>

<div class="content"> 

<p>CONTENT STARTS BENEATH THE HEADER.</p>

</div>

<footer class="footer"> </footer>

</body>

CSS：

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

body{
    min-height: 100%;
    margin: 0; 
    padding: 0; 

    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.header {
 z-index:2;
 height:85px;
 width:100%;
 background-color:green;
opacity:0.5;
}

.content {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1; /* STICKY FOOTER WITH DYNAMIC HEIGHT */
position:absolute;
top:0px;
width: 100%;
height: auto;
background-color:yellow;

}

.footer {   
left: 0;
right: 0;
bottom:0;
margin: 0 auto;
height: 85px;
width: 100%;
background-color:blue;
}

Answer 1

你正在寻找这样的东西吗？

此解决方案也不使用固定保证金等，所有部分都是动态的。

样品

＆＃13;

html, body { 
  margin: 0;
  height:100%; 
  min-height: 100%;
}

body {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

header {
  min-height: 85px;
  background-color: green;
  opacity:0.7;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

.content {
  flex: 1;
  background-color:yellow;
  position: relative;
  z-index: 1;
}

footer {   
  height: 85px;
  background-color: lightblue;
}

＆＃13;

<header>
  Header
</header>

<div class="content"> 

CONTENT STARTS BENEATH THE HEADER.
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>

<footer>
  Footer
</footer>

＆＃13;

Answer 2

如果使用top: 0;和bottom: 0;，绝对定位元素将从其最接近的非静态父级的顶边到底边跨越。使用这些值来调整它的样式就可以了。

Answer 3

我仍然无法准确地了解您的目标。就像@Claudio说的那样，你确定它不是你追求的那个粘性标题吗？

如果您坚持，请在内容中应用负边距，该边距等于标题高度。

演示：https://jsfiddle.net/mirohristov/qohprfwe/8/

编辑网站

刚试过它，它对我有用：

演示2：http://jsbin.com/jimejipahi/edit?html,output

您需要将html设置为100%。

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

body {
    margin: 0px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    min-height: 100%;
}

#content{
    flex: 1;
}

Answer 4

您是否尝试过height: 100vh而不是html { height: 100% }？

如果你没有完全理解你想要根据你的问题实现什么 - 如果你正在尝试基于flex的粘性页脚，这里有一些信息 -

您所要做的就是将垂直部分包装在Flex容器中，然后选择要扩展的部分。它们会自动占用容器中的所有可用空间。

在下面的示例中，容器设置为窗口的高度，并根据需要告知内容区域。（注意：在垂直方向上，您需要指定容器的高度。这与水平方向不同，水平方向会自动扩展以适合。）

HTML

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

CSS

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

有关详细信息，请查看 - http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

如何在弹性布局中使绝对定位的元素填充页面的高度？

4 个答案:

编辑网站