左栏固定，右栏自适应

方法1：

<style>

body{ margin:0; height:100%}

html{ height:100%} /*兼容firefox的div高度100%*/

#left{ position:absolute; top:0; left:0; width:200px; height:100%; background-color:#CCCCCC}

#right{ margin-left:200px; height:100%; background-color:#0099FF}

</style>

方法2：

<style>

body{ margin:0; height:100%}

html{ height:100%} /*兼容firefox的div高度100%*/

#left{ width:150px; height:100%; float:left; ">#right{ height:100%; background-color: green }

</style>

方法3：

<style>

body{ margin:0; height:100%}

html{ height:100%} /*兼容firefox的div高度100%*/

#left{ width:200px; height:100%; background-color:#CCCCCC; float:left}

#right{ width:100%; height:100%; background-color:#0099FF}

</style>

转载于:https://www.cnblogs.com/cdx0/p/css_twoPart.html

左栏固定，右栏自适应相关推荐

html 将盒子固定浏览器,浏览器默认css样式表 css之左盒子固定,右盒子自适应的一种实现方式...
浏览器默认css样式表在页面布局或者是列表布局中,我们经常出现一个场景:左边是固定宽度的盒子,右边自适应:div>label>Open... maoguiyou 2016年09月13日 ...
沫沫金：2014最新全浏览器兼容左列固定右列自适应宽度技巧大公开
做前端的人肯定会遇到经典的左列固定,右列自适应宽度的样式效果.这种想起来很简单做起来很麻烦的事情今天你有好方案了. --不要信那些什么左侧写固定宽度,右侧不用写宽度属性和浮动属性,浏览器自动就实现右列 ...
【CSS布局】已知布局元素的高度，写出三栏布局，要求左栏、右栏宽度各为300px，中间自适应。
CSS 的布局应该是 CSS 体系中的重中之重了,主要的布局方式有 table 表格布局, flex 盒子布局.float 浮动布局.position 定位布局,grid 网格布局,还有针对于移动端的 ...
三栏布局：左右固定，中间自适应的几种方式
1.flex布局(强烈推荐) 实现方式:左右两栏设置宽度,中间栏设置 flex:1,占满余下部分 <!DOCTYPE html> <html lang="en"& ...
微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏
微信小程序实现自定义顶部导航栏(选项卡),固定导航栏和可滑动导航栏固定导航栏可滑动导航栏顶部导航栏的需求实现: 顶部导航栏由列表渲染,通过tabclick点击事件改变activeIndex变量的 ...
css多栏布局(双栏布局、三栏布局、圣杯布局、双飞翼布局)
1.两栏布局两栏布局的核心是左栏固定宽度,右栏宽度自适应 html结构为 <div class="outer"><div class="left&qu ...
[html] 写一个三栏布局，中间固定，两边自适应（平均）
[html] 写一个三栏布局,中间固定,两边自适应(平均) <style>html,body {height: 100%;margin: 0;padding: 0;}.container ...
CSS 实现左侧固定，右侧自适应两栏布局的方法
"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...
[html] 写一个三栏布局，两边固定，中间自适应
[html] 写一个三栏布局,两边固定,中间自适应 position + marginfloat + marginflex 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
[css] 使用flex实现三栏布局，两边固定，中间自适应
[css] 使用flex实现三栏布局,两边固定,中间自适应同意里面的一个回答,现在有很多简单的实现方式,传统的这个也是一种hack的方式,真的没必要去追究了,但是核心知识点可以掌握.1.把 cent ...

左栏固定，右栏自适应

左栏固定，右栏自适应相关推荐

最新文章

热门文章