窗口居中，自适应高度

最新推荐文章于 2023-04-20 21:05:19 发布

wuxhyou

最新推荐文章于 2023-04-20 21:05:19 发布

阅读量348

点赞数

本文链接：https://blog.csdn.net/wuxhyou/article/details/77602769

版权

css:

body {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:0 auto;
}

.outer {
min-width: 1920px;
width: 100%;
height: 100%;
background-color: chartreuse;
}

.max {
width:1920px;
height:100%;
margin: 0 auto;
background-color:blueviolet;
position:relative;

}

.top {
height: 100px;
background-color: red;
}

.left {
width: 300px;
position:absolute;
background-color: blue;
margin-top: 10px;
float: left;
bottom:160px;
top:100px;
}

.menu {
height: 50px;
width: 1610px;
background-color: orange;
position:absolute;
right:0;
margin-top:10px;
}

.main {
width: 1610px;
margin-top: 10px;
margin-left: 20px;
background-color: brown;
position:absolute;
right:0;
top:160px;
bottom:160px;
overflow:auto;
}

.footer {
height: 150px;
width: 1920px;
background-color: aqua;
margin-top: 620px;
position:absolute;
bottom:0;
}

html:

<body>
<div class="outer">
<div class="max">
<div class="top"></div>
<div class="left"></div>
<div class="menu"></div>
<div class="main">
<h1>你是个猪你是个猪你是个猪你是个猪你是个猪你是个猪你是个猪你是个猪你是个猪你是个猪你是个猪你是个猪你是个猪你是个猪你是个猪你是个猪你是个猪你是个猪你是个猪你是个猪你是个猪你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>
<h1>你是个猪</h1>

</div>
<div class="footer"></div>
</div>
</div>
</body>