<!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. Jmeter接口测试流程详解（中科软测认证中心）

    1.jmeter简介 Jmeter是由Apache公司开发的java开源项目,所以想要使用它必须基于java环境才可以: Jmeter采用多线程,允许通过多个线程并发取样或通过独立的线程对不同的功能同 ...

  2. B - A Simple Task

    https://vjudge.net/contest/446582#problem/B 这道题是一道不错的线段树练代码能力的题. #include<bits/stdc++.h> using ...

  3. Flask 之 高可用IP代理网站

    高可用代理IP网站 目标:提供高可用代理IP 步骤一:通过爬虫获取代理IP 步骤二:对代理IP进行检测,判断代理是否可用 步骤三:将可用的代理IP写入mongodb数据库 步骤四:创建网站,从数据库获 ...

  4. 队列的java实现

    今天老师提出一个问题,就是如何用java实现队列呢?我在网上找了许多资料,发现java也是可以很轻松的实现队列. 如下代码: package com; import java.util.Collect ...

  5. Java添加条形码到PDF表格

    条码的应用已深入生活和工作的方方面面.在处理条码时,常需要和各种文档格式相结合.当需要在文档中插入.编辑或者删除条码时,可借助于一些专业的类库工具来实现.本文,以操作PDF文件为例,介绍如何在编辑表格 ...

  6. 6月6日，HTTP/3 正式发布了！

    经过了多年的努力,在 6 月 6 号,IETF (互联网工程任务小组) 正式发布了 HTTP/3 的 RFC, 这是超文本传输协议(HTTP)的第三个主要版本,完整的 RFC 超过了 20000 字, ...

  7. npm init cabloy背后的故事

    背景 我们知道许多框架会提供一个脚手架工具,我们先下载安装脚手架工具,然后再通过脚手架命令行来创建项目.在npm@6.1.0中引入了npm init <initializer>的语法.简单 ...

  8. STL栈与队列

    #include<queue>// 队列 #include<stack>//栈 stack<int> s;//参数也是数据类型,这是栈的定义方式 queue< ...

  9. 介绍python和库文件管理

    一.Python 特点 1.易于学习:Python有相对较少的关键字,结构简单,和一个明确定义的语法,学习起来更加简单. 2.易于阅读:Python代码定义的更清晰. 3.易于维护:Python的成功 ...

  10. .NET中的并发操作集合

    更新记录 本文迁移自Panda666原博客,原发布时间:2021年7月1日. 一.并发集合 .NET中提供了相当多线程安全的集合,它们都在System.Collections.Concurrent命名 ...