使用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/ ...
随机推荐
- SpringBoot如何优雅关闭(SpringBoot2.3&Spring Boot2.2)
SpringBoot如何优雅关闭(SpringBoot2.3&Spring Boot2.2) 优雅停止&暴力停止 暴力停止:像日常开发过程中,测试区或者本地开发时,我们并不会考虑项目关 ...
- mybatis入门，CRUD，万能Map，模糊查询
第一个Mybatis程序 核心配置文件mybatis-config.xml <?xml version="1.0" encoding="UTF-8" ?& ...
- vue - Vue路由
至此基本上vue2.0的内容全部结束,后面还有点elementUI和vue3.0的内容过几天再来更新. 这几天要回学校去参加毕业答辩,断更几天 一.相关理解 是vue的一个插件库,专门用来实现spa( ...
- zabbix脚本获取web status code，异常告警
python代码,需要安装requests库 1 #!/usr/bin/env python 2 #-*-coding:utf-8-*- 3 import requests,os,sys 4 url ...
- vmware 无法安装 win 10
因为默认是 UEFI,但我们并没有 UEFI 引导分区,所以需要改成 BIOS
- 1.0 vue开篇之作
vue官网链接:https://cn.vuejs.org/ 一. vue简介 vue目前分为2.X版和3.X版,本文以2.X版为准,后续会更新3.X版本相关教程,建议从2.X版开始学起,因为此版本经过 ...
- k8s client-go源码分析 informer源码分析(4)-DeltaFIFO源码分析
client-go之DeltaFIFO源码分析 1.DeltaFIFO概述 先从名字上来看,DeltaFIFO,首先它是一个FIFO,也就是一个先进先出的队列,而Delta代表变化的资源对象,其包含资 ...
- Flask表单验证
学习内容:①判断请求方式(request.method) from flask import Flask,render_template,request app = Flask(__name__) @ ...
- axios知识点总结
是什么? 前端最流行的 ajax 请求库 基于Promise的HTTP客服端,可以在浏览器和服务器两个环境去运行. 特点 基于 xhr + promise 的异步 ajax 请求库 浏览器端/node ...
- sqlserver2008 数据库中查询存储过程的的创建修改和执行时间，以及比较常见的系统视图和存储过程
因为各种原因数据库中存在大量无用的存储过程,想查询存储过程的最后执行情况,处理长期不使用的存储过程 下面这条语句可以查询存储过程创建 修改和执行的最后时间: SELECT a.name AS 存储过程 ...