网页后台两种方式布局

1.利用定位和浮动布局

框架：

html，body{

　　height：100%；（使其高度一直是占满整个视口高度）

　　margin：0；（去掉外边框）

}

外部大盒子

　　设置颜色

　　设置定位布局为position：relative（相对定位，为了让下半部分的盒子有参考目标）

　　头部盒子

　　设置颜色和高度

　　下半部分盒子：

　　设置下半部分宽度和高度100%，颜色　　

　　设置为绝对定位 position：absolute；

　　设置top值，top：上半部分盒子高度（之后先半部分的子元素就不需要设定位置了）

　　　　左侧导航栏

　　设置浮动 float：left；

　　设置颜色，宽度，高度为100%；

　　　　右侧内容框

　　　　设置左侧外边框 margin-left：左侧导航栏高度

　　　　设置颜色，设置内边框padding

　　　　　　内容框

　　　　　　设置颜色

　　　　　　宽度和高度、圆角border-radius

　　　　　　overflow-y：auto；

2.利用伸缩盒布局

框架：

html，body{

　　height：100%；（使其高度一直是占满整个视口高度）

　　margin：0；（去掉外边框）

}

外部大盒子　　设置为伸缩盒布局 display：flex；

主轴设为Y轴 flex-direction: column;

　　头部盒子

　　flex-basis（为高度，因为主轴是Y轴）

　　下半部分盒子：

　　flex-grow：1（除了上半部分的盒子剩余空间都是下半部分盒子）

设置下半部分盒子为伸缩盒布局 display：flex；

overflow-y: scroll;（这个一定要添加，否则将不会展示出来后台的效果）

　　　　左侧导航栏

　　　　flex-basis（这个是宽度，因为父元素的主轴是X轴）

　　　　右侧内容框

flex-grow：1（下半部分除了左侧其他剩余空间都给右侧）

　　　　　　内容框

　　　　　　overflow-y: scroll;（自动出现竖向滚动条）

 

ps：添加颜色，只是为了可以看到盒子

　　伸缩盒注意有两个overflow-y: scroll;切不可缺少

 

转载于:https://www.cnblogs.com/ys199610/p/11311519.html