页面左边导航固定，右边自适应宽度

模式一：

<style type="text/css">
div { height:300px; border:2px solid #306;}
.left{width:300px; position:absolute; left:0; top:0;}
.right{ margin-left:310px;}
body{margin:0; padding:0;}
</style>
</head><body><div class="left"></div><div class="right"></div>
</body>

模式二：

<style type="text/css">
div { height:300px; border:2px solid #306;}
.left{width:300px; position:absolute; left:0; top:0;}
.center{ margin-left:310px; margin-right:200px;}
.right { width:190px;position:absolute; right:0; top:0;}
body{margin:0; padding:0;}
</style>
</head><body><div  class="center"></div><div class="left"></div><div class="right"></div>
</body>

转载于:https://www.cnblogs.com/wanliyuan/p/3696977.html

页面左边导航固定，右边自适应宽度相关推荐

css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法
方法一:浮动布局这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...
css左侧盒子固定右边自适应
盒子左侧固定右边自适应使用浮动加外边距设置父盒子高度,让子盒子高度100%继承父盒子,给做盒子设置宽度和浮动背景色,然后给右侧盒子设置marginleft宽度和背景色 <style>.b ...
div固定在浏览器顶部_手写几种常见的css布局，1垂直两栏左边固定右边自适应，垂直3栏左右固定中间自适应...
1垂直两栏右边固定左边自适应的四种写法 <!DOCTYPE html> <html lang="en"><head><meta chars ...
div css左边固定右边自适应布局
web前端开发之布局:先看效果图,最简单的左右布局.有可能还会被面试问道哈哈哈.一看也没什么特别之处,就是左边固定,右边自适应,就这么简单. 原理:通过设置一个margin-left;或者margin ...
vue css页面滚动，无滚动条，实现顶部导航固定，自适应布局 main标签+calc()
前言: 在写app的时候我们经常使用的是导航固定,内容滚动,以前经常使用的是better-scroll插件,后来碰到了点bug,现在改使用main标签了效果图: (顶部导航固定,内容页滚动) 页面布 ...
两个div并排左边div宽固定右边自适应
实现两个div,左边固定div宽度200px,右边div自适应 <div class= "container"><div class="left&quo ...
flex 实现左边固定右边自适应布局
页面布局--上下固定中间自适应出现滚动条布局
上下固定中间弹性滚动布局是H5页面最常见的布局方法:现在总结了3中布局方式. 1.position:fixed+overflow:scroll+js动态设置中间高度 html代码: //html结构 ...
CSS之中间固定两边自适应宽度
第一种:浮动布局实现 HTML: 这种方法我利用的就是浮动原理,左右定宽度分别进行左浮动和右浮动,此时主内容列(中间列没有定度)主会自动插入到左右两列的中间,最要注意的一点是,中间列一定要放在左右两列 ...

页面左边导航固定，右边自适应宽度

页面左边导航固定，右边自适应宽度相关推荐

最新文章

热门文章