css 网页右边固定左边自适应布局

发布时间:2019-08-02编辑:脚本学堂
分享一些css 网页右边固定左边自适应布局的例子,css实现左或右自适应布局的例子,有需要的朋友参考下。

一、右边固定左边自适应布局
右边的元素浮动
网页的渲染和网页的机构有很大的关系,最先出现的元素最先显示,右边的元素设置右浮动,左边的元素不浮动,但是设置margin-right,设置的值为右边元素的宽度。

css样式
 

#nav { width: 200px; float: right; overflow: hidden; }
#content-wrapper { margin-right: 200px; }

html代码:
 

复制代码 代码示例:
<div id="nav"> 
<p>菜单1</p> 
<p>菜单2</p> 
<p>菜单3</p> 
<p>菜单4</p> 
</div> 
<div id="content-wrapper">互联网上面的网站,左右布局的占了很大一部分,在响应式设计没有出现以前,网页的宽度大多是固定960px,但是随着用户显示器屏幕越来越大,我们就需要尽可能的利用屏幕的宽度,一种典型的场景是右边的导航栏固定宽度,而我们希望左边的宽度可以随着浏览器的宽度而自动适应。 <br>
<br>
可以用js轻易做到这一点,但希望只用css,有两种方式。 </div> 
</div>

这种布局,菜单栏会出现在正文的上方,最先加载,但是如果是一些其它的内容,对seo优化不是很好。

css的负边距(negative margin)
这个方法是将一个宽度为100%的div的外边距(left-margin or right-margin)设置为某个负值,然后将其第一个子div的外边距(与父容器的边距同方向)设置为对应的正值,那么这个div就可以浮动并且自 适应浏览器宽度。

css代码:
 

#nav { width: 200px; float: right; }
#content-wrapper { margin-right: -200px; float: left; width: 100%; }

html代码:
 

复制代码 代码示例:
<div id="content-wrapper"> 
<div id="content"> 
<p> 中新网1月12日电(记者贾靖峰)中国银监会有关负责人12日表示,将在风险可控、商业可持续前提下支持保障性住房建设,他并透露,2010年11月末经济适用房开发贷款同比劲增逾三成,经济适用房个人购房贷款则年劲增逾四成,但保障性住房贷款仍存在“风险缓释不足、还款保障难以落实”等问题。 </p> 
</div> 
</div> 
<div id="nav"> 
<p>菜单1</p> 
<p>菜单2</p> 
<p>菜单3</p> 
<p>菜单4</p> 
</div>
 

使用了一个css“hack”技术,使用psuedo css清除浮动造成的父容器高度不会自动撑大的问题。

二、左边固定 右边自适应
其一,左栏固定宽度,右栏自适应之对定位法:
 

复制代码 代码示例:
<!doctype html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>左栏固定宽度,右栏自适应之绝对定位法 - www.osxue.com</title>
 <style type="text/css">
 body{
  margin: 0;
 }
 #nav{
  top: 0;
  left: 0;
  width: 230px;
  height: 600px;
  background: #ccc;
  position: absolute;
 }
 #main{
  height: 600px;
  margin-left: 230px;
  background: #0099ff;
 }
 </style>
</head>
<body>
 <div id="container">
  <div id="nav">
   左栏
  </div>
  <div id="main">
   右栏
  </div>
 </div>
</body>
</html>
 

由于左栏使用绝对定位,脱离了文档流,因此有一个缺陷,即当左栏高度大于右栏时,无法将container撑开,这个缺陷单单只看两栏布局并没有太大影响,但如果两栏布局下面有一个底栏,就会出现底栏与左栏重叠的情况:
 

复制代码 代码示例:
<!doctype html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>左栏固定宽度,右栏自适应之绝对定位法</title>
 <style type="text/css">
 body{
  margin: 0;
 }
 #nav{
  top: 0;
  left: 0;
  width: 230px;
  height: 600px;
  background: #ccc;
  position: absolute;
 }
 #main{
  height: 400px;
  margin-left: 230px;
  background: #0099ff;
 }
 #footer{
  text-align: center;
  background: #009000;
 }
 </style>
</head>
<body>
 <div id="container">
  <div id="nav">
   左栏
  </div>
  <div id="main">
   右栏
  </div>
 </div>
 <div id="footer">
  底栏
 </div>
</body>
</html>

再来看看第二种方法,左栏固定宽度,右栏自适应之负margin法:
 

复制代码 代码示例:
<!doctype html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>左栏固定宽度,右栏自适应之负margin法</title>
 <style type="text/css">
 body{
  margin: 0;
 }
 #container{
  margin-left: 230px;
  _zoom: 1;
  /*兼容IE6下左栏消失问题*/
 }
 #nav{
  float: left;
  width: 230px;
  height: 600px;
  background: #ccc;
  margin-left: -230px;
  position: relative;
  /*兼容IE6下左栏消失问题,IE6真不让人省心啊>_<*/
 }
 #main{
  height: 600px;
  background: #0099ff;
 }
 </style>
</head>
<body>
 <div id="container">
  <div id="nav">
   左栏
  </div>
  <div id="main">
   右栏
  </div>
 </div>
</body>
</html>

这样无论两栏的高度如何变化都不会有问题:
 

复制代码 代码示例:
<!doctype html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>左栏固定宽度,右栏自适应之负margin法 - www.osxue.com</title>
 <style type="text/css">
 body{
  margin: 0;
 }
 #container{
  margin-left: 230px;
  _zoom: 1;
  /*兼容IE6下左栏消失问题*/
 }
 #nav{
  float: left;
  width: 230px;
  height: 600px;
  background: #ccc;
  margin-left: -230px;
  position: relative;
  /*兼容IE6下左栏消失问题,IE6真不让人省心啊>_<*/
 }
 #main{
  height: 400px;
  background: #0099ff;
 }
 #footer{
  clear: both;
  text-align: center;
  background: #009000;
 }
 </style>
</head>
<body>
 <div id="container">
  <div id="nav">
   左栏
  </div>
  <div id="main">
   右栏
  </div>
 </div>
 <div id="footer">
  底栏
 </div>
</body>
</html>