Question

（注意：据我所知，互联网上的任何地方都没有问过我的问题，而且我已经搜索了将近两天。）

我有一个内容div，半透明的背景和周围的装饰性边框完全位于网站徽标下方，但不会向下伸展以满足页脚的顶部部分，该部分粘贴在页面底部绝对的位置。这是一个联系页面，包含几个文本句子和一个简单的联系表单，因此没有足够的内容来填满整个页面。

具体来说，我需要一个带有边框的div来填充整个页面，而不是创建一个垂直滚动条，并且会遇到一个绝对定位的页脚的顶部。

网站的其余部分不使用绝对定位的页脚，因为有足够的内容可以始终将页脚向下推。所以，这里可以接受任何CSS属性，如果有必要，甚至是表格破解！

＆＃13;

header {
    height: 44px;
    background: orange;
}

article {
    box-sizing: border-box;
	border: 1px solid red; 
}

footer {
    height: 22px;
    background: green;
    position: absolute;
    bottom: 0;
}

＆＃13;

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

＆＃13;

Answer 1

您可以使用css3来设置＆＃34;文章＆＃34;的高度。 100％减去页眉和页脚高度（在这种情况下为66px），如下所示：

height:calc(100% - 66px);

请确保article元素的每个父级都将高度设置为100％（包括html和body）。

您修改后的 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或display:flex轻松实现基本布局。

表格如版：

＆＃13;

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

＆＃13;

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

＆＃13;

和flex版本

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: