您的位置：首页 > Web前端 > HTML

网页html结构右侧栏固定，左侧自适应大小。

2015-01-27 18:06 169 查看

最近写了一个项目，写页面的结构，html树形结构是有header，container，footer部分，其中container部分是右侧栏是固定宽度，左侧是自适应宽度与屏幕高度。

第一次写的博客文章是container部分是左侧栏固定，右侧是自适应效果。左侧栏固定是很好写，但右侧栏固定却不很好写，以下是基本的结构与样式。

<div class="container" style="overflow:hidden;">
<div class="left leftCont">
</div>
<div class="right rightSide">
</div>
</div

1.左右栏高度一定，如果仍想按照左侧固定的模式写右侧固定的效果。可以如下写：

可以看到container下的两个div进行了对调。

<style type="text/css">

.rightSide {
width: 200px;
height: 600px;
background: red;
float: right;
}
.leftCont {
width: 100%;
margin-right: 200px;
background-color: blue;
height: 600px;
}
</style>
</head>
<body>
<div class="container" style="overflow:hidden;">
<div class="rightSide">
</div>
<div class="leftCont">
</div>
</div>
</body>

2.如果不想将两个子div进行调换位置，则可以写如下代码，

<style type="text/css">
.rightSide {
width: 200px;
height: 600px;
background: red;
float: right;
}

.leftCont {
float: left;
width: 100%;
margin-right: 200px;
background-color: blue;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
</style>
</head>
<body>
<div class="container" style="overflow:hidden;">
<div class="left leftCont">
</div>
<div class="right rightSide">
</div>
</div>
</body>

这样界面实现效果，并且左侧的高度大小跟右侧div的高度一样。其中关键的两句话是：margin-buttom：-2000px; padding-buttom：2000px; 并且3000px不是固定的值，只要是比实际需求的高度大就ok。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航