固定侧栏宽度自适应全屏页面布局 - 听雨空间-人生百态落花听雨

您的位置:主页 > web笔记 >

web笔记固定侧栏宽度自适应全屏页面布局

2017-03-09作者：落花听雨来源：落花听雨次阅读

主要利用了负边距来完成的简单两栏布局，当然三栏布局：左右固定，中间自适应的原理是一样的

<!DOCTYPE html>

<head>

<title>固定侧栏宽度自适应全屏页面布局</title>

<style>

*{margin:0;padding:0;}

html,body{height:100%;}

.layout{padding-left:200px;}

.layout .layout-left{width:200px;margin-left:-200px;float:left;height:400px;background-color:#ccc;}

.layout .layout-right{width:100%;float:left;height:400px;background-color:#999;}

</style>

</head>

<body>

<div class="layout-right">右侧:这里是自适应的，无论你的屏幕多少宽度，左侧栏目始终是屏幕宽度减去200px大小</div>

</div>

</body>

</html>

效果如下

凡本站注明“本站”或“投稿”的所有文章，版权均属于本站或投稿人，未经本站授权不得转载、摘编或利用其它方式使用上述作品。本站已授权使用的作品，应在授权范围内使用，并注明“来源：某某站”并附上链接。违反上述声明者，本站将追究其相关法律责任。

编辑：关键词：页面布局