css布局:三栏布局

1.左侧盒子200px,中间盒子大于等于500px，右侧盒子300px：

<div class="main">
		<div class="left"></div>
		<div class="con"></div>
		<div class="right"></div>
</div>
<style>
.main{
	min-width: 1000px;
	display: flex;
	.left{
		width: 200px;
		height: 100px;
		background: blue;
	}
	.con{
		min-width: 500px;
		height: 100px;
		background: green;
		flex: 1;
	}
	.right{
		width: 300px;
		height: 100px;
		background: yellow;
	}
}
</style>

2.中间内容多，footer随内容滚动；中间内容少，footer固定在页尾：

<div class="content">
	<div class="main">
		<div class="left"></div>
		<div class="con"></div>
		<div class="right"></div>
	</div>
	<div class="footer"></div>
</div>

<style>
        html{
			width: 100%;
			height: 100%;
		}
		.content{
			display: flex;
			flex-direction: column;
			.main{
				min-height: calc(100vh - 200px);
				flex: 1;
			}
			.left{
				width: 200px;
				height: 100px;
				background: blue;
			}
			.con{
				min-width: 500px;
				height: 100px;
				background: green;
				flex: 1;
			}
			.right{
				width: 300px;
				height: 100px;
				background: yellow;
			}
			.footer{
				height: 200px;
				background-color: aquamarine;
				po
			}
		}
</style>