CSS解决高度自适应问题，品字布局

好想吃螺蛳粉ヾ

于 2021-03-04 13:02:51 发布

阅读量285

点赞数

分类专栏： HTML CSS 文章标签： html5

本文链接：https://blog.youkuaiyun.com/qq_45466648/article/details/114365832

版权

HTML 同时被 2 个专栏收录

8 篇文章

订阅专栏

CSS

6 篇文章

订阅专栏

容器的宽度自适应窗口
容器的高度和浏览器窗口的高度相同，不能出现纵向滚动条
头部header高度50px，底部部分填充剩余的高度（品字布局）

<!DOCTYPE html>
<html>
<head>
	<title>CSS解决高度自适应问题</title>
	<style type="text/css">
		html, body {
		    margin: 0;
    		padding: 0;
		}
		.container{
			margin: 0 auto;
			width: 100%;
		}
		header{
			background-color: green;
			height: 50px;
		}
		main{
			background-color: gray;
			display: flex;
		    width: 100%;
		    position: absolute;
		    top: 50px;
		    bottom: 0;
		    left: 0px;
		}
		aside{
			background-color: blue;
			width: 200px;
		}
		section{
			background-color: yellow;
			/*width: calc(100% - 200px)*/
			flex: 1;
		}
	</style>
</head>
<body>
	<div class="container">
		<header>header</header>
	    <main>
	    	<aside>aside</aside>
	    	<section>section</section>
	    </main>
	</div>
</body>
</html>