css的样式问题
项目里面遇到一个布局：
然后侧边栏菜单的高度要随着内容的高度变化而变化；所以在这里贴一下代码；效果如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
background-color: aqua;
width:100%;
height: 100%;
}
.header{
height: 100px;
background-color:yellow;
}
.main{
display: flex;
}
.aside{
width: 200px;
/* height: auto; */
height: 100%;
background-color:blue
}
.content{
height: 1000px;
flex: 1;
background-color: skyblue
}
</style>
</head>
<body>
<div class='container'>
<div class='header'>头部内容</div>
<div class='main'>
<div class='aside'>左边菜单</div>
<div class='content'>右边内容</div>
</div>
</div>
</body>
</html>
通过上面的代码发现，如果类.aside的高度设置为：height：100%；并没有跟右边内容的高度一致。而放出注释的height：auto；。则会跟着右边的高度的变化而变化。
.aside{
width: 200px;
height: auto;
/* height: 100%; */
background-color:blue
}
css的样式问题的更多相关文章
- 精简的网站reset 和 css通用样式库
参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...
- css初始化样式代码
为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...
- 漂亮的CSS按钮样式集以及在线生成工具
以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- html / css打印样式
最近做公司后台系统,需要打印贴箱标签,按照正常打印A4纸的标准,测试的效果不是自己想要的,文字排版布局都乱了,查了一些资料,需要设置的东西我总结了一下: 显示器(screen)和打印机(printer ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
- 第 15 章 CSS 文本样式[下]
学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...
- 第 15 章 CSS 文本样式[上]
学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇 本节 ...
- CSS常用样式（四）之animation
上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...
- CSS Reset样式重置
为了让页面在各不同浏览器之间显示效果一致,CSS样式清除和重置是前端开发必需要做的事情,结合前车之鉴,整理了份CSS重置样式代码供参考. @charset "utf-8"; /* ...
随机推荐
- 关于MySQL 处理重复数据
统计重复数据 以下我们将统计表中 first_name 和 last_name的重复记录数: mysql> SELECT COUNT(*) as repetitions, last_name, ...
- Div内容居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- SpringMVC详解一、@RequestMapping注解与Controller接收参数
SpringMVC详解一.@RequestMapping注解与Controller接收参数 https://blog.csdn.net/mxcsdn/article/details/80719258 ...
- js style.display = "" 和style.display="none" 区别
style.display = "":是清除display样式,display将使用默认值(块元素会变成block,内联元素会变成inline)style.display=&quo ...
- Mysql的BTREE和HASH索引
建议默认使用BTree索引,如果时间太长,可以尝试HAST索引,但限制如下: 不支持between and 只支持 = IN <> 不支持范围查询如between and和like. 无法 ...
- navicat常用快捷键与SQL基本使用
一.Navicat常用快捷键 1,Ctrl+q就会弹出一个sql输入窗口 2,Ctrl+r就执行sql了 3,按f6会弹出一个命令窗口 4,Ctrl+/ 注释 5,Ctrl +Shift+/ 解除注释 ...
- StringBuilder&StringBuffer 源码阅读
StringBuilder 和 StringBuffer StringBuilder 和 StringBuffer 都继承了 AbstractStringBuilder 类,所有实际的字符操作都在父类 ...
- jquery绝对路径
<strong>1.修改为绝对路径</strong> $(document).ready(function(){ $.get("${pageContext.reque ...
- HTML基础之DOM
DOM(Document Object Model 文档对象模型) 一个web页面的展示,是由html标签组合成的一个页面,js是一门语言,dom对象实际就是将html标签转换成了一个文档对象.可以通 ...
- python字符串判断
s为字符串 s.isalnum() 所有字符都是数字或者字母 s.isalpha() 所有字符都是字母 s.isdigit() 所有字符都是数字 s.islower() 所有字符都是小写 s.isup ...