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

（注意：据我所知，我的问题在互联网上还没有被问到，我已经搜索了将近两天了。）

我有一个半透明背景和装饰边框的内容div，它完美地位于网站徽标下方，但不会向下延伸以满足页脚的顶部，页脚粘贴在页面底部的绝对位置。这是一个联系人页面，有几句文字和一个简单的联系人表单，因此没有足够的内容来填满整个页面。

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

网站的其余部分不使用绝对定位的页脚，因为有足够的内容可以持续向下推页脚。因此，任何CSS属性在这里都是可以接受的，即使是必要的表破解！

JS Fiddle

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>

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

height:calc(100% - 66px);

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

您修改的小提琴

使用固定位置的替代答案。我认为阿尔瓦罗·梅嫩德斯有一个更好的答案，尽管

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/

您可以使用display:table或display:flex轻松实现基本布局。

类似表格的版本：

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>

和弹性版

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>

相关内容

最新更新

热门标签：