使用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/ ...
随机推荐
- 轮播——swiper
swiper组件 1.轮播数据是使用ajax进行填充的话,可能数目是0~n,在数目是1时,轮播会出现一些问题(出现空白侧),这时需作出判断(一张图片不滑动,多张就就行滑动),方法如下(以下方法中,si ...
- RESTFul是一种风格
只要符合RESTFul风格的,都可以叫做使用了RESTFul架构,一般的网站里传数据,都是用的?a=1&b=2...如果是RESTFul风格的话,就会是/a/1/b/2..类似于这样的方式来传 ...
- js运算符、 流程控制 、函数、内置对象、BOM与DOM操作
运算符 # 1.算术运算符 var x=10; var res1=x++; '先赋值后自增1' var res2=++x; '先自增1后赋值' # 2.比较运算符 弱等于:自动转换类型 '5' == ...
- 手把手教你 在IDEA搭建 SparkSQL的开发环境
1. 创建maven项目 在IDEA中添加scala插件 并添加scala的sdk https://www.cnblogs.com/bajiaotai/p/15381309.html 2. 相关依赖j ...
- CMake技术总结
在做算法部署的过程中,我们一般都是用C++开发,主要原因是C++的高效性,而构建维护一个大型C++工程的过程中,如何管理不同子模块之间的依赖.外部依赖库.头文件和源文件如何隔离.编译的时候又该如何相互 ...
- 文件操作（Java）
学习内容:文件操作 1.输入流:InputStream类是字节输入流的抽象类,常用的一些方法有: raed()方法:从输入流中读取数据的下一个字节 reset()方法:将输入指针返回到当 ...
- 很好用的vscode 插件 Open PHP/HTML/JS In Browser 让php文件直接在浏览器打开
p { font-size: 25px } <body> <h1>安装插件</h1> <img src="https://img2020.cnblo ...
- Codeforces Round #793 (Div. 2)
C. LIS or Reverse LIS? D. Circular Spanning Tree E. Unordered Swaps F MCMF?
- NODE.JS exports require理解
node.js exports 的作用是什么? 因为A.js文件想访问B.js文件中的类或函数,是不能直接访问的.为了解决这个问题 node.js 产生了 exports ,exports 实际可以理 ...
- php 使用phpqrcode生成二维码并上传到OSS
一般情况调用phpqrcode第三方插件 会把生成的二维码图片保存到服务器,不保存服务器也会以header头的形式输出到浏览器,(我们不允许把图片文件保存的liunx服务器,只能保存到阿里云OSS存储 ...