css两栏宽度自适应
对于做后台管理系统或者一屏页面来说,会涉及到做左右两栏的效果,左边作为导航栏,右边作为主页面。通常情况下,我们首先想到的是使用浮动效果将两栏浮动起来左右放置,但是这样会导致,其中一些内容的位置会出现错位。因此这里,给出了一个两栏宽度自适应的方式,用来解决浮动问题。
给定左边导航栏的宽度为200px,高度为500px。右边的主体内容部分宽高自适应为整个页面剩余的部分。
给导航栏添加浮动效果,这时发现右边的部分浮动到左边的下面,为了调整这一布局,给右边的部分添加overflow:hidden即可。
*注意:
这里会有人问:我不可以直接添加右浮动吗?这样也可以实现左右放置的效果啊!
答:如果添加右浮动那么必须给右边部分设置宽高,这样浮动才会有效果,如果让其进行宽高自适应后,再给其添加浮动,浮动是识别不了宽高的,也就无法显示右边的部分了。
html,body{height: 100%;}
.left{
float: left;
width: 200px;
height: 500px;
background: darkorange;
}
.right{
height: 100%;
background: darkseagreen;
overflow: hidden;
}