使用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;
}
.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撑开子元素的更多相关文章
- 子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题
方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...
- 没有高度的div中的子元素高度自动撑开
直接上代码: 很多时候 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 子元素使用float 父元素撑开方法
一个Div包含了多个子Div,并且子Div使用了浮动后,父Div确不能被撑开,如下图: 部分代码如下: 1 <style> 2 #div1{border:1px solid red;f ...
- 子元素position:absolute定位之后脱离文档流，怎么使子元素撑开父元素
纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. <!DO ...
- 解决子元素设置margin-top，效果到父元素上的问题
有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...
- CSS 设置背景透明度，不影响子元素
由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素． 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- jquery子元素选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery层级原则器（匹配父元素下的子元素）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 面试官：RocketMQ是什么，它有什么特性与使用场景？
哈喽!大家好,我是小奇,一位热爱分享的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 作为一名Java程序员,Roc ...
- AspNetCore开源中间件-VueRouterHistory
前言 用过VueRouter路由组件的应该都知道,VueRouter有hash和history两种模式.hash模式会在url中插入#,history模式下url则看上去更加简洁美观.如果想要支持hi ...
- SpringBoot项目使用jasypt加解密
Jasypt 是一个 Java 库,它允许开发者以最小的努力为他 / 她的项目添加基本的加密功能,而且不需要对密码学的工作原理有深刻的了解. 一.添加依赖 <dependency> < ...
- Java 统计新客户
上周做了一个订单数据统计的任务,统计的是订单的新客户数量,本文做一个解题过程的记录和整理. 新客户的定义 新客户指的是选取时间段有订单,时间段之前没有订单. 比如下面的订单数据: 时间段 2月1日之前 ...
- 147_Power BI Report Server demo演示
焦棚子的文章目录 服务器地址:http://pbirs.jiaopengzi.com/reports 用户名:pbirs 密码:pbirs 分别用pc网页.pc桌面power bi软件以及手机端pow ...
- Windows 程序安装与更新方案： Clowd.Squirrel
我的Notion Clowd.Squirrel Squirrel.Windows 是一组工具和适用于.Net的库,用于管理 Desktop Windows 应用程序的安装和更新. Squirrel.W ...
- nginx 部署前端资源的最佳方案
前言 最近刚来一个运维小伙伴,做线上环境的部署的时候,前端更新资源后,总是需要清缓存才能看到个更新后的结果.客户那边也反馈更新了功能,看不到. 方案 前端小伙伴应该都知道浏览器的缓存策略,协商缓存和强 ...
- MathType7安装使用及please restart word to load mathtype addin properly的问题
MathType7安装使用及please restart word to load mathtype addin properly的问题.最近在自己的电脑上安装Mathtype7,把遇到的问题和解决办 ...
- while循环结构
一.循环: 1.场景: ①.用户名和密码,反复输入 ②.计算1-100之间 ③.游戏,重生 ④.-- 2.方式 ①.while ②.for 3.while格式 while 条件:要循环执行的代码 布尔 ...
- 【动态规划】统计蚂蚁 (ants)
题目 描述 蚂蚁山上有T(1<=T<=1,000)种蚂蚁,标记为1..T,每种蚂蚁有N_i只蚂蚁(1<=N_i<=100),现有A(A<=5000)只蚂蚁,从中选出S,S ...