Question

在我的网站上，有一个全屏background-image（因此它从底部到顶部，从一个站点到另一个站点）。此图像应始终可见，并且永远不会被除图像等之外的任何元素隐藏。

我有三个主要部分：

标题
内容
页脚（固定）

它们具有透明背景，因此我的页面背景通过所有这些都可见。页眉和页脚具有相同的颜色（较暗的颜色），内容区域较浅。

标题和内容包含在<div>元素中，页脚位于HTML5 <footer>元素中。我使用固定位置的页脚，我的页眉和内容区域的高度不确定。

我希望Content-Area使用页眉和页脚之间的完整高度。有没有人有任何建议如何实现这个目标？

代码：

* { margin: 0; padding: 0; }
html, body {
	background-color: yellow;
	height: 100%;
}

#page_wrap {
	min-height: 100%;
	margin-bottom: -3em; /* footer height */
}
footer {
	background-color:rgba(0, 0, 0, 0.4);
	line-height: 3em;
}

#head_nav {
	background-color:rgba(0, 0, 0, 0.4);
}

#content {
	background-color: rgba(255, 255, 255, 0.9);
}

<body>
	<div id="page_wrap">
		<div id="head_nav">
			<p>Navigation</p>
			<a href="/">Home</a>
		</div>
		<div id="content">
			<p>The page content</p>
		</div>
	</div>
	<footer>
		<p>Footertext</p>
	</footer>
</body>

Answer 1

解决方案很简单，考虑到你知道页脚的高度，因为你没有提到页脚的高度未知。

所以这就是你需要做的事情：

上面的代码片段有一个变量标题，整页高度的内容区域（期望页脚的高度）和固定的页脚。

Answer 2

您可以这样使用DIV：

CSS：

* { margin: 0; padding: 0; }
html, body {
    background-color: yellow;
}

#page_wrap {
    height: 100%;
}
footer {
    background-color:rgba(0, 0, 0, 0.4);
  height: 50px;
}

#head_nav {
  height: 50px;
    background-color:rgba(0, 0, 0, 0.4);
}

#content {
  min-height: calc(100vh - 100px);
    background-color: rgba(255, 255, 255, 0.9);
}

小提琴：https://jsfiddle.net/j5u5pLvq/1/

CSS3：另一个Unknown-Height-Box的高度未知的盒子，高度为100％

2 个答案: