用于动态内容的Flexbox容器

时间：2018-05-07 13:46:09

标签： flexbox

我正在处理将由专有CMS使用的单页模板。它基本上是一个标题，页面的大部分是3列，还有一个页脚。在中间列中，CMS将向其中注入内容。内容可以有不同的长度。

我需要不修复页脚，以便在内容大于容器的初始vh时动态调整大小。我该如何处理？

<!doctype html>
<header>
<style type="text/css">
	html, body {
		margin: 0;
	}

	#header {
		display: flex;
		background: #000000;
		height: 10vh;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		border-bottom: 2px solid black;
	}

	#header-left {
		background: red;
		flex-basis: 50%;
		flex-shrink: 0;
	}

	#header-right {
		background: green;
		flex-basis: 50%;
		flex-shrink: 0;
		align-content: flex-end;
	}

	#content-container {
		flex-direction: row;
		display: flex;
		background: #cccccc;
		height: 80vh;
		justify-content: space-between;
	}

	#sidebar-left {
		background: purple;
		flex-basis: 20%;
	}

	#sidebar-right {
		background: yellow;
		flex-basis: 15%;
	}

	#content {
		border-left: 2px solid black;
		border-right: 2px solid black;
		flex-basis: 65%;
		flex-grow: 
	}

	#footer {
		display: flex;
		background: white;
		height: 60px;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		border-top: 2px solid black;
	}

	#footer-left {
		background: pink;
		flex-basis: 50%;
	}

	#footer-right {
		background: orange;
		flex-basis: 50%;
		align-content: flex-end;
	}

</style>
</header>
<body>
<div id="header">
	<div id="header-left">
		HEADER-LEFT HERE
	</div>
	<div id="header-right">
		HEADER-RIGHT HERE
	</div>
</div>
<div id="content-container">
	<div id="sidebar-left">
		SIDEBAR-LEFT
	</div>
	<div id="content">
		CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum 
	</div>
	<div id="sidebar-right">
		SIDEBAR-RIGHT
	</div>
</div>
<div id="footer">
	<div id="footer-left">
		FOOTER-LEFT
	</div>
	<div id="footer-right">
		FOOTER-RIGHT
	</div>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分：1)

只需将height: 80vh更改为min-height: 80vh; 

<!doctype html>
<header>
<style type="text/css">
	html, body {
		margin: 0;
	}

	#header {
		display: flex;
		background: #000000;
		height: 10vh;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		border-bottom: 2px solid black;
	}

	#header-left {
		background: red;
		flex-basis: 50%;
		flex-shrink: 0;
	}

	#header-right {
		background: green;
		flex-basis: 50%;
		flex-shrink: 0;
		align-content: flex-end;
	}

	#content-container {
		flex-direction: row;
		display: flex;
		background: #cccccc;
		min-height: 80vh;
		justify-content: space-between;
	}

	#sidebar-left {
		background: purple;
		flex-basis: 20%;
	}

	#sidebar-right {
		background: yellow;
		flex-basis: 15%;
	}

	#content {
		border-left: 2px solid black;
		border-right: 2px solid black;
		flex-basis: 65%;
		flex-grow: 
	}

	#footer {
		display: flex;
		background: white;
		height: 60px;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		border-top: 2px solid black;
	}

	#footer-left {
		background: pink;
		flex-basis: 50%;
	}

	#footer-right {
		background: orange;
		flex-basis: 50%;
		align-content: flex-end;
	}

</style>
</header>
<body>
<div id="header">
	<div id="header-left">
		HEADER-LEFT HERE
	</div>
	<div id="header-right">
		HEADER-RIGHT HERE
	</div>
</div>
<div id="content-container">
	<div id="sidebar-left">
		SIDEBAR-LEFT
	</div>
	<div id="content">
		CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum CONTENT lorum ipsum lorum ipsum 
	</div>
	<div id="sidebar-right">
		SIDEBAR-RIGHT
	</div>
</div>
<div id="footer">
	<div id="footer-left">
		FOOTER-LEFT
	</div>
	<div id="footer-right">
		FOOTER-RIGHT
	</div>
</div>
</body>
</html>

相关问题
最新问题