<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        html, body {

            padding: 0;

            margin: 0;

            /* height: 2400px; */

            height: 100%;

            background: lightgray;

        }

        .container {

            width: 400px;

        }

        .header {

            height: 50px;

            background: red;

        }

        .body {

            height: 100px;

            background: yellow;

            width: 600px;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="header"></div>

        <div class="body"></div>

    </div>

</body>

</html>

上面的例子body比container还宽，header使用了container的宽度，所以出现了上短下长。

让container设置min-width: fit-content能解决这个问题。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        html, body {

            padding: 0;

            margin: 0;

            /* height: 2400px; */

            height: 100%;

            background: lightgray;

        }

        .container {

            width: 400px;

            min-width: fit-content;

        }

        .header {

            height: 50px;

            background: red;

        }

        .body {

            height: 100px;

            background: yellow;

            width: 600px;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="header"></div>

        <div class="body"></div>

    </div>

</body>

</html>

使用fit-content撑开子元素的更多相关文章

  1. 子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题

    方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...

  2. 没有高度的div中的子元素高度自动撑开

     直接上代码: 很多时候 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. 子元素使用float 父元素撑开方法

    一个Div包含了多个子Div,并且子Div使用了浮动后,父Div确不能被撑开,如下图: 部分代码如下: 1 <style> 2   #div1{border:1px solid red;f ...

  4. 子元素position:absolute定位之后脱离文档流，怎么使子元素撑开父元素

    纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. <!DO ...

  5. 解决子元素设置margin-top，效果到父元素上的问题

    有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...

  6. CSS 设置背景透明度，不影响子元素

    由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素． 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...

  7. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  8. jquery子元素选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery层级原则器（匹配父元素下的子元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 老生常谈系列之Aop--CGLIB动态代理的底层实现原理

    老生常谈系列之Aop--CGLIB动态代理的底层实现原理 前言 上一篇老生常谈系列之Aop--JDK动态代理的底层实现原理简单讲解了JDK动态代理的实现,动态代理常用实现里面的双子星还有另一位--CG ...

  2. CRM项目的整理-----第二篇

    1.项目的登录 1.1 app创建二级路由 2.登录页面   http://www.jq22.com/

  3. 中国电子云数据库 Mesh 项目 DBPack 的实践

    作者:刘晓敏 2022 年 4 月,中国电子云开源了其云原生数据库 Mesh 项目 DBPack.该项目的诞生,旨在解决用户上云过程中面临的一些技术难点,诸如分布式事务.分库分表等.由于它数据库 Me ...

  4. 一窥 AJAX

    一窥 AJAX 本文写于 2020 年 6 月 7 日 AJAX 这个词非常常见,如果使初学者,说不定还会非常害怕这个名字看起来非常高端.非常难的技术. AJAX,全称 Async JavaScrip ...

  5. Java多线程编程实战02：多线程编程模型

    多线程编程模型 线程安全名词 串行.并发和并行 串行:一个人,将任务一个一个完成 并发:一个人,有策略地同时做多件事情 并行:多个人,每人做一个事情 竞态 名词 竞态:计算结果的正确性与时间有关的现象 ...

  6. 【Java8新特性】Optional 类

    概述 Optional 类是一个可以为null的容器对象.如果值存在则isPresent()方法会返回true,调用get()方法会返回该对象. Optional 是个容器:它可以保存类型T的值,或者 ...

  7. Python技法：浮点数取整、格式化和NaN处理

    1. 取整的三种方法 1.1 强转int类型 这种方法会直接对浮点数的小数部分进行截断(无论是正还是负). print(int(2.7)) # 2 print(int(-2.7)) # -2 1.2 ...

  8. 看Spring源码不得不会的@Enable模块驱动实现原理讲解

    这篇文章我想和你聊一聊 spring的@Enable模块驱动的实现原理. 在我们平时使用spring的过程中,如果想要加个定时任务的功能,那么就需要加注解@EnableScheduling,如果想使用 ...

  9. thusc2022游记

    DAY -1: 刷往年相关的题 DAY 0: 刷会儿题了,搞电脑,下obs.不过,发现电脑出了很多问题. obs没有录频效果,因为卡,杀毒软件把vc++全都删了.因此无dll文件错误,搞了一晚上都没搞 ...

  10. MySQL、SqlServer、Oracle，这三种数据库的优缺点，你知道吗？

    盘点MySQL.SqlServer.Oracle 三种数据库优缺点 MySQL SqlServer Oracle 一.MySQL 优 点 体积小.速度快.总体拥有成本低,开源:支持多种操作系统:是开源 ...