两栏布局,左侧固定宽度,右侧自适应大小

原创 2016年05月31日 23:02:51

html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS布局</title>
</head>
<body>
    <div id="left"></div>
    <div id="right"></div>
</body>
</html>

第一种方式

*{margin:0; padding: 0;}
html,body{
        height: 100%;/*高度百分百显示*/
}
#left{
    width: 300px;
    height: 100%;
    background-color: #ccc;
    float: left;
}
#right{
    height: 100%;
    margin-left: 300px;
    background-color: #eee;
}

第二种方式

*{margin:0; padding: 0;}
html,body{
        height: 100%;/*高度百分百显示*/
}
#left{
    width: 300px;
    height: 100%;
    background-color: #ccc;
    float: left;
}
#right{
    height: 100%;
    overflow:hidden;
    background-color: #eee;
}

第二种方法,我利用的是创建一个新的BFC(块级格式化上下文)来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境,它内部元素的布局不受外面布局的影响。它可以通过以下任何一种方式来创建:
float 的值不为 none
position 的值不为 static 或者 relative
display 的值为 table-cell , table-caption , inline-block , flex , 或者 inline-flex 中的其中一个
overflow 的值不为
visible

关于BFC,在w3c里是这样描述的:在BFC中,每个盒子的左外边框紧挨着 包含块 的 左边框 (从右到左的格式化时,则为右边框紧挨)。即使在浮动里也是这样的(尽管一个包含块的边框会因为浮动而萎缩),除非这个包含块的内部创建了一个新的BFC。这样,当我们给右侧的元素单独创建一个BFC时,它将不会紧贴在包含块的左边框,而是紧贴在左元素的右边框。

版权声明:本文为博主原创文章,未经博主允许不得转载。

两栏自适应布局

实现效果:一边固定,一边自适应

css实现等高布局 两栏自适应布局 三栏自适应布局

总结一下css常用的布局样式等高布局等高布局实现方法有很多 在这里总结常用的三种方法 padding补值法 该方法是通过负margin,同时将padding的值设为正的margin值实现的 具体实现方...

两栏等高布局||两栏自适应高度

常用两栏等高布局三种方法 这里梳理一下三种常用的两栏等高布局方法,如有谬误,欢迎指正 -、margin-bottom和padding-bottom html hello hello h...

两栏布局——实现左边固定,右边 自适应(右边固定,左边自适应)

两栏布局——实现左边固定,右边 自适应(右边固定,左边自适应)
  • dq_pp
  • dq_pp
  • 2017年04月18日 14:34
  • 909

css布局之浮动模型&&左右两栏自适应布局

一个元素浮动时,其他内容会“环绕”该元素,浮动元素要设置一个width。浮动元素会自动生成一个块级框(行内元素会转成块级元素)。浮动元素规则浮动元素不能超过包含它的块的左右内边界。 浮动元素之前...

HTML页面分两栏,左右栏个自适应相…

HTML页面分两栏,左右栏个自适应相邻的高度(兼容IE6.7.8.火狐)。(左栏的高度增加,右栏自动增加高度。右栏高度增加,左栏自动增加高度) 直接看代码: ...

侧边栏高度自适应左边内容

首先三个div: 左边内容 侧边栏 然后利用flex: #wrapper{ display: flex ; } #co...

如何实现网页左右两边盒子高度自适应布局

最近在做一个项目时,有一个页面左侧有导航栏,右侧是内容,由于右侧内容不确定,所以右侧盒子的高度是根据内容的多少自动变化的,而我希望左侧导航栏的高度可以根据右侧盒子的高度变化而变化,当然,如果你是希望右...

CSS布局--左侧自适应母元素高度

CSS布局--左侧自适应母元素高度
  • sxk8162
  • sxk8162
  • 2015年07月17日 16:56
  • 1021

实现如下页面布局。核心区域左侧自适应,右侧固定宽度 200px

原题目:牛客网-阿里巴巴2016前端开发工程师笔试(一):10题 要求自适应,那一开始就不能把左侧content的宽度给设死了。尝试了几次一开始思维定式就先从左至右写吧,于是 .content...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:两栏布局,左侧固定宽度,右侧自适应大小
举报原因:
原因补充:

(最多只允许输入30个字)