如何在Flex版式中使绝对定位的元素填充页面的高度？

Question

I have two page templates in a Wordpress website, both of which I've tried to use flex CSS to create a sticky footer with a variable height. 我在Wordpress网站上有两个页面模板，我都尝试使用flex CSS创建高度可变的粘性页脚。 One of the templates works fine, but the second one has some issues with it. 其中一个模板工作正常，但第二个模板存在一些问题。

The first page template: 第一页模板：

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

As you can see, the content starts below the header and fills the page right down to the footer. 如您所见，内容从页眉下方开始，并一直填充到页脚。

HTML: HTML：

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

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

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

</body>

CSS: 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;
}

The second page template: 第二页模板：

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

I have designed the second page template so that the content starts at the very top of the page, underlapping the header. 我设计了第二个页面模板，以便内容从页面的顶部开始，并与页眉重叠。 Because I'm using a flex layout to achieve a sticky footer, I have used position:absolute on the content div in order to get it to sit at the top of the page underneath the header. 因为我使用的是flex布局来实现页脚的粘性，所以我在content div上使用了position：absolute，以便使其位于页面顶部页眉下方。 The problem is that the absolute positioning stops the content div from taking up the full height of the page like it does when set to position:relative in the first template. 问题在于，绝对定位会阻止内容div占用页面的整个高度，就像在第一个模板中将其设置为position：relative一样。 This means that unless I put enough content in my page to fill it up, the content doesn't reach the top as intended and it sits around in the middle of the page. 这意味着除非我在页面中放入足够的内容来填充它，否则该内容就不会达到预期的顶部，而是位于页面中间。 (This doesn't happen in the jsfiddle but it does on my site when I'm using my page builder plugin) （这在jsfiddle中不会发生，但是当我使用页面构建器插件时会在我的网站上发生）

I've tried using height:100%; 我试过用height：100％; but this hasn't worked, is there any way I can get the height to fill the page, whilst ensuring that it starts at the very top of the page as it is currently? 但这没有用，有什么办法可以让我填补整个页面的高度，同时确保它从当前页面的最顶部开始？

HTML: HTML：

<body>

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

<div class="content"> 

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

</div>

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

</body>

CSS: 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

Is it something like this you are looking for? 您正在寻找这样的东西吗？

This solution also don't use fixed margin etc., all parts is dynamic. 该解决方案也不使用固定边距等，所有部分都是动态的。

Sample 样品

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

 <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>

Answer 2

If you use top: 0; 如果使用top: 0; and bottom: 0; 和bottom: 0; the absolute positioned element will span from the top edge to the bottom edge of its closest non static parent. 绝对定位的元素将从其最接近的非静态父元素的顶部边缘到底部边缘。 Play around with those values to style it just way you want it. 试着使用这些值来按照您想要的方式对其进行样式设置。

Answer 3

I still don't get precisely what you are trying to do. 我仍然无法确切地知道您要做什么。 Like @Claudio said, are you sure it's not sticky header you are after? 就像@Claudio所说的那样，您确定它不是要粘贴的标头吗？

If you insist, apply a negative margin to your content that is equal to that of the header height. 如果您坚持要对您的内容应用等于页眉高度的负页边距。

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

Edit for website 编辑网站

Just tested it and it works for me here: 刚刚测试过，它在这里对我有用：

Demo2: http://jsbin.com/jimejipahi/edit?html,output 演示2： http ：//jsbin.com/jimejipahi/edit？ html，输出

You need to set the html to 100% . 您需要将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

Have you tried height: 100vh rather than html { height: 100% } ? 您是否尝试过height: 100vh而不是html { height: 100% } ？

Without fully understanding what you are trying to achieve based on your question - If you are trying for a flex based sticky footer here is some info - 在没有完全了解您要根据自己的问题实现的目标的情况下-如果您尝试使用基于Flex的粘页脚，那么这里有一些信息-

All you have to do is wrap the vertical sections in a flex container and choose which ones you want to expand. 您所要做的就是将垂直部分包装在flex容器中，然后选择要扩展的部分。 They'll automatically take up all the available space in their container. 他们会自动占用容器中的所有可用空间。

In the example below, the container is set to the height of the window, and the content area is told to expand as needed. 在下面的示例中，将容器设置为窗口的高度，并告知内容区域根据需要扩展。 (Note: in the vertical direction you need to specify a height for the container. This is different from the horizontal direction, which automatically expands to fit.) （注意：您需要在垂直方向上指定容器的高度。这与水平方向不同，水平方向会自动扩展以适合容器。）

The HTML HTML

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

The CSS CSS

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

.Site-content {
  flex: 1;
}

For more information check out - http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ 有关更多信息，请查看-http: //philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

如何在Flex版式中使绝对定位的元素填充页面的高度？

问题描述

4 个解决方案

解决方案1
1 已采纳 2016-03-23 19:38:06

解决方案2
0 2016-03-23 18:52:38

解决方案3
0 2016-03-23 19:12:06

Edit for website 编辑网站

解决方案4
0 2016-03-23 23:33:57

如何在Flex版式中使绝对定位的元素填充页面的高度？

问题描述

4 个解决方案

解决方案1 1 已采纳 2016-03-23 19:38:06

解决方案2 0 2016-03-23 18:52:38

解决方案3 0 2016-03-23 19:12:06

Edit for website 编辑网站

解决方案4 0 2016-03-23 23:33:57

解决方案1
1 已采纳 2016-03-23 19:38:06

解决方案2
0 2016-03-23 18:52:38

解决方案3
0 2016-03-23 19:12:06

解决方案4
0 2016-03-23 23:33:57