css后台页面布局效果

CSS浮动+定位

参考:实现左边div固定宽度，右边div自适应撑满剩下的宽度的布局方式：https://www.cnblogs.com/yzhihao/p/6513022.html

下面使用的关键就是使用overflow:hidden开启右侧内容区的BFC，使得左边的浮动元素无法盖住右侧内容区，并且可以使得它们在同一行。而且当左边浮动元素宽度减小时，右侧内容区宽度将会自动撑大剩余宽度。
还有的话，就是高度需要层层设置成父元素高度的100%，不然高度就不能撑满了。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.clearfix::before,.clearfix::after {content: "";display: table;clear: both;}/**  STYLE 5*/#style-5::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #F5F5F5;}#style-5::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-5::-webkit-scrollbar-thumb {background-color: #0ae;background-image: -webkit-gradient(linear, 0 0, 0 100%,color-stop(.5, rgba(255, 255, 255, .2)),color-stop(.5, transparent), to(transparent));}#style-6::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0,0, 0.3);background-color: #F5F5F5;}#style-6::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-6::-webkit-scrollbar-thumb {background-color: #F90;background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent)}html,body,.container {height: 100%;}body {margin: 0;}.left {float: left;width: 200px;height: 500px;height: 100%;background-color: pink;transition: all 0.5s;margin-right: 20px;overflow: auto;}.left:hover {width: 50px;}.left-menu {height: 1200px;background-color: cyan;}.menu-item {height: 50px;background-color: rgb(78, 191, 101);margin: 10px;}.content-outer {overflow: hidden;background-color: #bfa;height: 100%;overflow: auto;}.content-wrapper {padding: 20px;}.content1 {height: 500px;background-color: rgb(177, 228, 119);margin-bottom: 10px;}</style>
</head><body><div class="container"><div class="left" id="style-5"><div class="left-menu clearfix"><div class="menu-item">1</div><div class="menu-item">2</div><div class="menu-item">3</div><div class="menu-item">4</div><div class="menu-item">5</div><div class="menu-item">6</div><div class="menu-item">7</div><div class="menu-item">8</div><div class="menu-item">9</div><div class="menu-item">10</div><div class="menu-item">11</div><div class="menu-item">12</div><div class="menu-item">13</div><div class="menu-item">14</div><div class="menu-item">15</div><div class="menu-item">16</div><div class="menu-item">17</div><div class="menu-item">18</div></div></div><div class="content-outer" id="style-6"><div class="content-wrapper"><div class="content1">123aaavvv</div><div class="content1">123aaavvv</div></div></div><!-- </div> -->
</body></html>

再加一个头部和尾部，内容区可滚动。
主要时用到了calc这个函数和100vh这个可视区高度css如何让页面填满剩余高度与宽度
https://blog.csdn.net/makewithyou/article/details/122710998

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.clearfix::before,.clearfix::after {content: "";display: table;clear: both;}/**  STYLE 5*/#style-5::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #F5F5F5;}#style-5::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-5::-webkit-scrollbar-thumb {background-color: #0ae;background-image: -webkit-gradient(linear, 0, 0, 0 100%)color-stop(.5, rgba(255, 255, 255, .2)),color-stop(.5, transparent), to(transparent);}#style-6::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #F5F5F5;}#style-6::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-6::-webkit-scrollbar-thumb {background-color: #F90;background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent)}html,body,.container {height: 100%;}body {margin: 0;}.head {text-align: center;line-height: 50px;}.left {float: left;width: 200px;height: 500px;height: 100%;background-color: pink;transition: all 0.5s;margin-right: 20px;overflow: auto;}.left-menu {height: 1200px;background-color: cyan;}.menu-item {height: 50px;background-color: rgb(78, 191, 101);margin: 10px;}.content-outer {position: relative;overflow: hidden;background-color: #bfa;overflow: hidden;/* height: 100%; */height: calc(100vh - 50px);}.content-wrapper {/* padding: 20px; *//* height: 800px; */overflow-y: scroll;margin-bottom: 10px;/* position: absolute; */width: 100%;height: calc(100vh - 50px - 40px - 10px);/* bottom: 40px; */}.foot {bottom: 0;width: 100%;position: absolute;height: 40px;background-color: pink;text-align: center;line-height: 40px;}.content1 {height: 500px;background-color: rgb(177, 228, 119);margin-bottom: 10px;}.left:hover {width: 50px;}.head {height: 50px;}body {overflow: hidden;}</style>
</head><body><div class="head">我是head</div><div class="container"><div class="left" id="style-5"><div class="left-menu clearfix"><div class="menu-item">1</div><div class="menu-item">2</div><div class="menu-item">3</div><div class="menu-item">4</div><div class="menu-item">5</div><div class="menu-item">6</div><div class="menu-item">7</div><div class="menu-item">8</div><div class="menu-item">9</div><div class="menu-item">10</div><div class="menu-item">11</div><div class="menu-item">12</div><div class="menu-item">13</div><div class="menu-item">14</div><div class="menu-item">15</div><div class="menu-item">16</div><div class="menu-item">17</div><div class="menu-item">18</div></div></div><div class="content-outer" ><div class="content-wrapper" id="style-6"><div class="content1">123aaavvv</div><div class="content1">123aaavvv</div></div><div class="foot">我是foot</div></div></div>
</body></html>

flex布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>#style-6::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.0);background-color: #F5F5F5;border-radius: 6px;}#style-6::-webkit-scrollbar {width: 6px;background-color: #F5F5F5;}#style-6::-webkit-scrollbar-thumb {background-color: #F90;border-radius: 6px;background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent)}* {margin: 0;padding: 0;list-style: none;}html,body {width: 100%;height: 100%;overflow: hidden;}.wrapper {background-color: pink;width: 100%;height: 100%;display: flex;}.wrapper .left {width: 220px;background-color: rgb(94, 171, 138);height: 100%;overflow-y: scroll;/* margin-right: 10px; */}.menu-item {height: 50px;background-color: cyan;margin: 10px;}.wrapper .right {width: 200px;background-color: rgb(102, 158, 184);height: 100%;flex-grow: 1;display: flex;flex-flow: column nowrap;}.head {min-width: 1000px;height: 75px;background-color: rgb(215, 156, 156);flex-shrink: 0;}.head .head-item {width: 700px;height: 20px;background-color: cyan;}.content-wrapper {margin-top: 10px;margin-left: 10px;padding: 10px;background-color: rgb(163, 199, 141);flex-grow: 1;overflow-y: scroll;overflow-x: hidden;}.content1 {height: 50px;background-color: pink;margin-bottom: 10px;}</style>
</head><body><div class="wrapper"><div class="left" id="style-6"><div class="menu-item"></div><div class="menu-item"></div><div class="menu-item"></div><div class="menu-item"></div><div class="menu-item"></div><div class="menu-item"></div><div class="menu-item"></div><div class="menu-item"></div><div class="menu-item"></div><div class="menu-item"></div><div class="menu-item"></div><div class="menu-item"></div><div class="menu-item"></div><div class="menu-item"></div></div><div class="right"><div class="head"><div class="head-item"></div></div><div class="content-wrapper" id="style-6"><div class="content1"></div><div class="content1"></div><div class="content1"></div><div class="content1"></div><div class="content1"></div><div class="content1"></div><div class="content1"></div><div class="content1"></div><div class="content1"></div><div class="content1"></div><div class="content1"></div><div class="content1"></div><div class="content1"></div><div class="content1"></div><div class="content1"></div><div class="content1"></div><div class="content1"></div><div class="content1"></div></div></div></div>
</body></html>

css后台页面布局效果相关推荐

element-UI栅格系统缩放，导致页面布局效果bug? 叠加？错位？
这里以此代码片段为例说明一则bug,请bug对号入座.(bug截图省略) 页面的栅格缩放,导致页面布局发生叠加错位? 一.坑1 · 引言: (先来一则bug代码) <el-card v-for= ...
利用HTML+CSS进行页面布局（div的浮动效果）
什么叫做浮动??(利用一系列图片来解释什么叫浮动) 我们利用float:left;进行div浮动时,会有一个立体的抽象浮动过程,浮动的div会上向左移,而跟在下面的div会占据第一个div的位置,这个 ...
div css 登录页面布局,DIV+CSS页面布局
页面布局设计一.三行模式或三列模式特点:把整个页面水平.垂直分成三个区域. 三行模式:将页面分成头部.主体及页脚三部分三列模式:将页面分成左.中.右三个部分在CSS文件里: 1.三行模式代码 ...
web前端入门到实战：CSS实现平行四边形布局效果
如何实现下图所示的平行四边形布局效果? 一.skewX的局限一提到平行四边形,条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法,可以让元素斜切,从而 ...
HTMLCSS--使用CSS完成页面布局及排版（附案例代码）
CSS简介 CSS (Cascading Style Sheets) 层叠样式表,是一个用于修饰文档的语言,可以将文档以更优雅的形式呈现给用户. 在html中引入css 1.将css规则直接填写在st ...
【web前端开发 | CSS】页面布局之盒子模型
思维导图文章目录思维导图 1:边框 2:内边距 3:外边距外边距合并 1. 相邻块元素垂直外边距的合并 2. 嵌套块元素垂直外边距的塌陷所谓盒子模型:就是把 HTML 页面中的布局元素看作是 ...
前端笔记html+css+vue, 页面布局、定位、字体背景等和一些常用方法
目录弹性布局: 定位: overflow溢出: 表单: vue数据存取: vuex store 全局数据: vux弹窗,软提示,硬提示 ElementUI MessageBox 弹框简单用法背景设 ...
通过css实现页面黑白效果
前言: 临近下班,接到上级通知,为了缅怀今日逝世的英雄:需要对网站进行微调整-- 整个页面呈现出黑白效果实现: css的filter(滤镜)属性 filter可以设置的属性值有: - none:默 ...
学习CSS（页面布局篇）
2019独角兽企业重金招聘Python工程师标准>>> ######图文混排 *{clear:both;/*清除浮动*/ } <div><a href=" ...

css后台页面布局效果

CSS浮动+定位

flex布局

css后台页面布局效果相关推荐

最新文章

热门文章