使用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/ ...
随机推荐
- Python自定义排序及我实际遇到的一些题目实例
写在前面,本文主要介绍Python基础排序和自定义排序的一些规则,如果都比较熟悉,可以直接翻到第三节,看下实际的笔试面试题中关于自定义排序的应用. 一.基础排序 排序是比较基础的算法,与很多语言一样, ...
- 注解，lombok
使用注解开发 UserMapper public interface UserMapper { @Select("select * from db4.user") List< ...
- OAuth2密码模式已死，最先进的Spring Cloud认证授权方案在这里
旧的Spring Security OAuth2停止维护已经有一段时间了,99%的Spring Cloud微服务项目还在使用这些旧的体系,严重青黄不接.很多同学都在寻找新的解决方案,甚至还有念念不忘密 ...
- 867. Transpose Matrix - LeetCode
Question 867. Transpose Matrix Solution 题目大意:矩阵的转置 思路:定义一个转置后的二维数组,遍历原数组,在赋值时行号列号互换即可 Java实现: public ...
- 443. String Compression - LeetCode
Question 443. String Compression Solution 题目大意:把一个有序数组压缩, 思路:遍历数组 Java实现: public int compress(char[] ...
- 385. Mini Parser - LeetCode
Question 385. Mini Parser Solution 分析:用NI(count,list)来表示NestedInteger,则解析字符串[123,[456,[789]]]过程如下: # ...
- 117_PowerQuery使用ODBC访问带密码的Access
博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一. 有朋友在问pq访问带密码的access的时候会报错,导致无法访问(如下图): 1.选择更多 图1 2.选择Acces ...
- Spring AOP快速使用教程
Spring是方法级别的AOP框架,我们主要也是以某个类的某个方法作为连接点,用动态代理的理论来说,就是要拦截哪个方法织入对应的AOP通知.为了更方便的测试我们首先创建一个接口 public in ...
- python基础学习5
Python的基础学习5 内容概要 流程控制理论 if判断 while循环 内容详情 流程控制理论 # 流程控制:即控制事物执行的流程 # 执行流程的分类 1.顺序结构 从上往下按顺序依次执行 2.分 ...
- 4. Docker自定义镜像
下面制作镜像: 此时,验证一下: 以上验证都是成功的,到此就可以把刚才建立并经过刚才运行并验证的镜像包通过各种方式传递给其他人来部署使用了,并且环境肯定是可你统一的.