2个div左右铺满整个浏览器，左边div一直保持100px，右边的div跟随浏览器大小变化

爱被打了一巴掌 2022-06-07 05:56 153阅读 0赞

方法一：使用flex

效果如图所示：

![Center][]

<div class="box">
      <div class="left"></div>
      <div class="right"></div>
    </div>

*{
      margin:0;
      padding:0;
    }
    .box {
    /*     width: 400px; */
        height: 100px;
        display: flex;
        flex-direction: row;
        align-items: center;
        border: 1px solid #c3c3c3;
    }
    .left {
        flex-basis：100px;
        -webkit-flex-basis: 100px;
        /* Safari 6.1+ */
        background-color: red;
        height: 100%;
    }
    .right {
        background-color: green;
        flex-grow: 1;
      height: 100%;
    }

方法二：浮动布局

效果如图所示：

![Center 1][]

<div id="left">Left</div>
    <div id="right">Right</div>

* {
        margin: 0;
        padding: 0;
    }
    #left {
        float: left;
        width: 100px;
      height:100px;
        background-color: green;
      text-align:center;
      line-height:100px;
      color:#fff;
    }
    #right {
        background-color: orange;
        margin-left: 100px;
        text-align:center;
      height:100px;
      line-height:100px;
    }

[Center]: /images/20220607/be9c58eb4cb84ce4808b714d41f654fc.png
[Center 1]: /images/20220607/f72f1568dd154432a63bf319e0e4a266.png

发表评论取消回复

表情：

评论列表（有 0 条评论，153人围观）

还没有评论，来说两句吧...

相关阅读

相关如何让 div 铺满整个屏幕

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQw

以你之姓@/ 2023年02月23日 08:51/ 0 赞/ 232 阅读

相关让body、Div占满整个浏览器的窗口

今天在研究百度首页的时候，发现内部的div总是能铺满整个窗口，这对于我们自适应页面制作是非常有帮助的。仔细查看之后，发现是因为设置了： html,body{

桃扇骨/ 2022年09月25日 09:18/ 0 赞/ 187 阅读

相关让DIV块保持在浏览器窗口中央位置

<html> <head> <script type="text/javascript" src="./jquery-1.4.4.js"></sc

Myth丶恋晨/ 2022年06月15日 09:12/ 0 赞/ 180 阅读

相关 div 不能占满整个页面

在页面中，有时候我们想自己写个遮罩层，让它的宽度和高度都占满整个可见页面区域，css设置好了，但是还是没有得到想要的效果。遮罩层用<div>表示，是body的直接子元素

小咪咪/ 2022年06月08日 03:52/ 0 赞/ 252 阅读

相关 2个div左右铺满整个浏览器，左边div一直保持100px，右边的div跟随浏览器大小变化

方法一：使用flex 效果如图所示： ![Center][] <div class="box"> <div class="left"></div

爱被打了一巴掌/ 2022年06月07日 05:56/ 0 赞/ 154 阅读

相关 jquery 监听div大小变化函数|div resize事件

[http://www.itshij.com/divresize][http_www.itshij.com_divresize] 今天，小编给大家整理的是监听div大小

谁借莪１个温暖的怀抱￠/ 2022年06月07日 05:36/ 0 赞/ 988 阅读

相关 css中让图片铺满整个div盒子

盒子是middle middle{ border: 1px solid blue; position: absolute;

淩亂°似流年/ 2022年05月14日 02:12/ 0 赞/ 742 阅读

相关同行div，左边自适应，右边固定宽度

css: .left\{ width: 100%; float: left; margin-right: -132px; \} .lcon

本是古典何须时尚/ 2022年01月28日 04:53/ 0 赞/ 540 阅读

相关 div背景的图片不能跟随大小变化的问题

div背景的图片不能跟随大小变化的问题记录下自己在工作中遇到的问题：背景：要在项目首页的中加入一个背景图片，然后这次用的是DIV，在DIV中加入背景图片，然后在bo

今天药忘吃喽~/ 2022年01月23日 10:15/ 0 赞/ 221 阅读

相关铺满全屏的div

继承法 <style> { margin:0; padding:0; }

秒速五厘米/ 2021年12月17日 05:21/ 0 赞/ 282 阅读