使边框延伸到粘性页脚顶部的装饰 div

Question

(注：据我所知，我的问题在网上还没有人问过，找了快两天了。)

我的内容 div 具有半透明背景和装饰性边框，完美地位于站点徽标下方，但不会向下延伸以与粘在底部的页脚顶部相接具有绝对位置的页面。这是一个包含几句话文本和一个简单联系表单的联系页面，因此内容不足以填满整个页面。

具体来说，我需要一个带有边框的 div 来填满整个页面，而不创建垂直滚动条，并与绝对定位的页脚顶部相接。

网站的其余部分不使用绝对定位的页脚，因为有足够的内容始终将页脚向下推。因此，任何 CSS 属性都在这里接受 table，如果有必要甚至 table hack！

header {
    height: 44px;
    background: orange;
}

article {
    box-sizing: border-box;
 border: 1px solid red; 
}

footer {
    height: 22px;
    background: green;
    position: absolute;
    bottom: 0;
}

<body>
<header>
header
</header>
<article>
article with small amount of content<br>
<br>
and a simple contact form<br>
<br>
this red border needs to meet the top of the footer<br>
without creating a vertical scroll bar
</article>
<footer>
footer
</footer>
</body>

Answer 1

您可以使用 css3 将 "article" 的高度设置为 100% 减去页眉和页脚高度（在本例中为 66px），如下所示：

height:calc(100% - 66px);

只需确保文章元素的每个父元素都将高度设置为 100%（包括 html 和正文）。

你修改后的fiddle

Answer 2

使用固定位置的备选答案。我认为 Alvaro Menendez 有更好的答案

article {
  box-sizing: border-box;
  border: 1px solid red; 
  position:fixed;
  top:50px; /* size of header */
  right:0;
  bottom:30px; /* size of footer */
  left:0;
}

http://jsfiddle.net/j909r64j/2/

Answer 3

您可以使用任一方法 display:table or display:flex 来轻松实现您的基本布局。

table 喜欢的版本：

header {
    height: 44px;
    background: orange;
}
article {
    box-sizing: border-box;
    border: 1px solid red;
}
footer {
    height: 22px;
    background: green;
}
html, body {
    height:100%;
    width:100%;
    margin:0;
}
body {
    display:table;
    border-collapse:collapse;
}
header, article, footer {
    display:table-row;
}
article {
    height:100%;
}

    <header>header</header>
    <article>article with small amount of content
        <br>
        <br>and a simple contact form
        <br>
        <br>this red border needs to meet the top of the footer
        <br>without creating a vertical scroll bar</article>
    <footer>footer</footer>

和 flex 版本

header {
    height: 44px;
    background: orange;
}
article {
    box-sizing: border-box;
    border: 1px solid red;
}
footer {
    height: 22px;
    background: green;
}
html {
    height:100%;
    width:100%;
   
}
body { 
    min-height:100%;
    margin:0;
    display:flex;
    flex-direction:column;
}

article {
    flex:1;
}

    <header>header</header>
    <article>article with small amount of content
        <br>
        <br>and a simple contact form
        <br>
        <br>this red border needs to meet the top of the footer
        <br>without creating a vertical scroll bar</article>
    <footer>footer</footer>

使边框延伸到粘性页脚顶部的装饰 div

Make decoration div with border stretch down to top of sticky footer

html

css

height

footer

article