页面布局方案-左定宽,右自适应左右百分比
左右百分比
两列布局, 左右为百分比,高度自适应。
效果:
代码:
<!DOCTYPE html>
<html>
<head>
<title>左侧固定,右侧自适应</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html,body{
margin:0;
height: 100%;
}
.cui_layout_container{
height:100%;
}
.float_left{float:left;}
.cui_layout_container .right_side,.cui_layout_container .left_side{
height: 100%;
overflow: auto;
}
.cui_layout_container .left_side{
width:40%; /*左侧宽度*/
background-color:#ff7d20;
}
.cui_layout_container .right_side{
background-color:#FFE69F;
width:60%; /*右侧宽度*/
}
</style>
</head>
<body>
<div class="cui_layout_container">
<div class="left_side float_left">
左侧40%
</div>
<div class="right_side float_left">
右侧60%
</div>
</div>
</body>
</html>