前端web网站上中（左右）下布局(flex、calc)

news/2024/4/29 3:05:17/文章来源:https://blog.csdn.net/weixin_34163553/article/details/89035336

基本布局1: 上中（左右）下布局

<style>html,body{margin:0;height:100%;overflow-y: hidden;}header{height: 40px;line-height: 40px;position: fixed;top: 0;width: 100%;background: #ccc;}.center{width:100%;height: 100%;background: #eee;margin-top: 40px;display: flex;}.left{width:20%;border-right: solid 1px #ccc;height: calc(100% - 80px);overflow-y: auto;}.right{width: 80%;height: calc(100% - 80px);overflow-y: auto;padding-left: 19px;}footer{background: #ccc;height: 40px;line-height: 40px;position: fixed;bottom: 0;width: 100%;}
</style>
<body><div style="height:100%"><header>头部</header><div class="center"><div class="left">左侧</div><div class="right"><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div></div></div><footer>底部</footer></div>
</body>

效果如下：

图片描述

基本布局2：上中（左中右,左、右侧固定）下布局

<style>html,body{margin:0;height:100%;overflow-y: hidden;}header{height: 40px;line-height: 40px;position: fixed;top: 0;width: 100%;background: #ccc;}.center{width:100%;height: 100%;background: #eee;margin-top: 40px;display: flex;}.left{width:50px;border-right: solid 1px #ccc;height: calc(100% - 80px);overflow-y: auto;}.right{width:50px;border-right: solid 1px #ccc;height: calc(100% - 80px);overflow-y: auto;}.center-s{width: 100%;height: calc(100% - 80px);overflow-y: auto;padding-left: 19px;}footer{background: #ccc;height: 40px;line-height: 40px;position: fixed;bottom: 0;width: 100%;}
</style>
<body>
<div style="height:100%"><header>头部</header><div class="center"><div class="left">左侧</div><div class="center-s"><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div><div>超过高度出现滚动条</div></div><div class="right">右侧</div></div><footer>底部</footer>
</div>
</body>