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"; /* ...
随机推荐
- 20道HTML基础面试题（附答案）
以下是我整理的一些HTML的基础面试体,并自己整理了答案. 1 DOCTYPE有什么作用?标准模式与混杂模式如何区分?它们有何意义? 告诉浏览器使用哪个版本的HTML规范来渲染文档.DOCTYPE不存 ...
- JPA查询getOne()与findOne()的差异以及一些小问题
起初用Jpa 里面 getOne() 查询一个id的数据 发现查询出来的数据都是空的,但不是空的对象是按照对象默认值来的 所以导致查询不出结果 以为是数据库修改,没有及时修改实体类导致的 但是后来发现 ...
- spring整合之后运行报什么只读错误。Write operations are not allowed in read-only mode (FlushMode.MANUAL): Turn your Session into FlushMode.COMMIT/AUTO or remove 'readOnly' marker from transaction definition.
解决办法, 再大dao的实现类上添加注解: @Transactional(readOnly = false ) 不让它只读就行了
- oj.1677矩形嵌套，动态规划 ，贪心
#include<iostream> #include<algorithm> #include<cstring> using namespace std; stru ...
- 转自B站 真希望我在20岁就懂得的10个人生道理 主讲：王魄
视频地址:https://www.bilibili.com/video/av65194244?from=search&seid=15261178568916939794 这位阿姨讲得还行,特别 ...
- Electron对JQuery的支持问题
最近在了解Electron框架写应用,偶然发现在html中使用<script src="./jquery.js"></script>这种方式引入JQuery ...
- python自然语言处理学习笔记2
基础语法 搜索文本----词语索引使我们看到词的上下 text1.concordance("monstrous") 词出现在相似的上下文中 text1.similar(" ...
- CentOS 7.x关闭/开启防火墙出现Unit iptables.service failed to load: No such file or directory问题解决
一直用CentOS 6.x,今天用CentOS7.3版本时,防火墙配置后执行service iptables start出现”Failed to restart iptables.service: U ...
- java：Springmvc框架2（Ajax，Json，Interceptor，Upload，Exception）
1.springmvcAjax: springmvc.xml: <?xml version="1.0" encoding="UTF-8"?> < ...
- 在Spring容器外调用bean
这个东西源于这种需求:一个应用丢到服务其后,不管用户有没有访问项目,这个后台线程都必须给我跑,而且这个线程还调用了Spring注入的bean,这样自然就会想到去监听Servlet的状态,当Servle ...