master

分支 (2)

管理

管理

master

dev_test

web-test
/
布局适应.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>footer始终处在底部</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		html,
		body {
			height: 100%;
		}

		.wrap {
			min-height: 100%;
		}

		.min {
			padding-bottom: 60px;
		}

		header {
			height: 60px;
			background: #1381cc;
			color: #FFF;
		}

		section {
			background: #fff;
		}

		footer {
			height: 60px;
			margin-top: -60px;
			background: #0c4367;
			color: #FFF;
		}

		.box {
			min-height: 600px;
			background-color: bisque;
			position: relative;
			display: grid;
			grid-gap: 10px;
			grid-template-columns: 200px auto 200px;
			grid-template-rows: 1fr;
		}

		.box .box-content {
			background-color: blue;
		}

		.box .box-left {
			flex: 0 0 200px;
			background-color: green;
		}

		.box .box-right {
			flex: 0 0 200px;
			background-color: pink;
		}
	</style>
	<body>
		<div class="wrap">
			<div class="min">
				<header></header>
				<section class="content">
					<div class="box">
						<div class="box-left">
							11dsdasdas不你弟弟呢单独
						</div>
						<div class="box-content">
							解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾
						</div>
						<div class="box-right">
							12酷酷酷酷酷的的是计算机技术升级的历史记录
						</div>
					</div>
				</section>
			</div>
		</div>
		<footer class="footer"></footer>
	</body>
</html>