div宽度随屏幕大小变化

矫情吗；* 2022-01-07 11:49 665阅读 0赞

题目：

一个页面上两个div左右铺满整个浏览器，

要保证左边的div一直为100px，右边的div跟随浏览器大小变化，

比如浏览器为500，右边div为400，浏览器为900，右边div为800。

方案一：使用flex布局

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

.box{
        
        display: flex;
        display: -webkit-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: blue;
        flex-grow: 1;
    }

方案一：使用浮动布局

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

*{
        
        margin: 0;
        padding: 0;
    }
    
    .left {
        
        float: left;
        width: 220px;
        background-color: green;
    }
    
    .right {
        
        background-color: orange;
        margin-left: 220px;    /*==等于左边栏宽度==*/
    }

转载于:https://www.cnblogs.com/lishuxue/p/6433223.html

发表评论取消回复

表情：

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

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

相关阅读

相关 echarts-markPoint标注图标宽度随内容值变化

![在这里插入图片描述][6eb8d18eeaab4212959d801cbd959634.png] option = { tool

不念不忘少年蓝@/ 2024年03月17日 12:06/ 0 赞/ 59 阅读

相关实现组件大小随窗口大小变化

暂时只学会用代码的方式，如果后续了解到在可视化界面的属性栏中可以设置会进而更新分享组件界面和一些属性 ![在这里插入图片描述][080f8e115a2a4fb9ae1

深藏阁楼爱情的钟/ 2023年10月14日 13:23/ 0 赞/ 76 阅读

相关监测div大小变化_JavaScript监听一个DOM元素大小变化

1.需求场景开发过程中经常遇到的一个问题就是如何监听一个 div 的size变化。比如我用canvas绘制了一个chart，当canvas的size发生变化的时候，需要

谁借莪１个温暖的怀抱￠/ 2023年01月01日 06:52/ 0 赞/ 742 阅读

相关背景图片，banner图片随屏幕大小变化而变化

1 . 背景图片变化业务背景：一个固定高度，固定最小宽度的横幅式banner [例子网站][Link 1] <!DOCTYPE html> <ht

客官°小女子只卖身不卖艺/ 2022年12月31日 03:26/ 0 赞/ 222 阅读

相关图片百分比宽度随屏幕宽度自适应为正方形

//html代码 <div class="module_comment_imgs">

╰+哭是因爲堅強的太久メ/ 2022年12月27日 08:39/ 0 赞/ 233 阅读

相关 echarts图表随屏幕的宽度自适应

图表的自适应chart.resize() 有时候会遇到屏幕宽度在变化，而echarts的图表保持原宽度不变的情况： ![在这里插入图片描述][70] 只需要在图表数

﹏ヽ暗。殇╰゛Y/ 2022年12月20日 02:59/ 0 赞/ 262 阅读

相关 div实现拖拽效果，宽度发生变化

最近项目中，需要写个能够拖拽的div，从网上找了相关的代码，为了方便以后使用，记下。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML

比眉伴天荒/ 2022年08月20日 09:27/ 0 赞/ 240 阅读

相关 JavaFx界面控件宽度随父元素宽度动态变化

是这样的，在学习JavaFx的时候，MenuBar组件，宽度设置到和窗口一样宽度，但是一缩放程序窗口大小，MenuBar的大小为固定值，所以就出现空白区域，影响美观，找了好多资

我会带着你远行/ 2022年05月18日 01:05/ 0 赞/ 287 阅读

相关 div宽度随屏幕大小变化

　　题目：　　一个页面上两个div左右铺满整个浏览器，　　要保证左边的div一直为100px，右边的div跟随浏览器大小变化，　　比如浏览器为500，右边div为4

矫情吗；*/ 2022年01月07日 11:49/ 0 赞/ 666 阅读

相关 css div的宽度随内部元素的宽度的变化而变化

div是块级元素,如果不设置他的明确的宽度,那他就等于父元素的宽度,如果要让其它随着子元素的变化而变化,需要改变他的属性,给他加上这个css属性即可display:inline

桃扇骨/ 2021年09月25日 16:58/ 0 赞/ 597 阅读