html 在线布局,html布局-管理系统布局

html布局-管理系统布局

如图

这种头部固定，下边内容，内容区域包括左侧menu和右侧content，中间有开关控制menu的显示隐藏。

关

爱上的看法

爱上的看法

$('#control').click(function(){

if($(this).text() == '关'){

$(this).text('开').parent().siblings('.leftMenu').animate({width:0});

}else{

$(this).text('关').parent().siblings('.leftMenu').animate({width:'200px'});

}

})

/*css*/

*{

padding:0;

margin:0;

box-sizing: border-box;

}

html,body{

width:100%;

height:100%;

overflow-x: hidden;

}

.header{

width: 100%;

height:80px;

border:1px solid black;

}

.content{

width:100%;

height:calc(100% - 80px);

border:1px solid red;

display: flex;

}

.leftMenu{

width:200px;

height:100%;

border:1px solid green;

display: flex;

align-items: center;

}

.rightContent{

flex:1;

width:calc(100% - 200px);

height:100%;

border:1px solid blue;

display: flex;

}

.rightContent>#control{

width:15px;

height:100%;

border:1px solid blue;

display: flex;

align-items: center;

cursor: pointer;

}

.rightContentContent{

flex:1;

width:calc(100% - 15px);

height:100%;

border:1px solid red;

padding:20px;

}

.rowInfomation{

width:100%;

display: flex;

margin:20px 0;

}

.rowInfomation>span{

width:100px;

}

.rowInfomation>input{

flex:1;/*flex:1了就没有必要设width*/

border:1px solid red;

width:calc(100% - 100px);

height:50px;

}

总结：

1、flex布局。容器display：flex；右侧flex;1;

2、calc布局。左侧固定宽度，右侧width:calc(100% - 固定宽度)；

标签：flex,管理系统,100%,布局,height,width,1px,html,border

来源： https://blog.youkuaiyun.com/weixin_42068855/article/details/89636141