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"; /* ...
随机推荐
- Zookeeper入门(七)之Java连接Zookeeper
Java操作Zookeeper很简单,但是前提要把包导对. 关于Zookeeper的Linux环境搭建可以参考我的这篇博客:Linux环境下Zookeeper安装 下面进入正题: 一.导入依赖 < ...
- linux文档与目录的相关命令
Linux文件系统结构 Linux目录结构的组织形式和Windows有很大的不同.首先Linux没有“盘(C盘.D盘.E盘)”的概念.已经建立文件系统的硬盘分区被挂载到某一个目录下,用户通过操作目录来 ...
- vuex 的介绍
vue-cli 中 css 的作用域 scoped vue 数据的为响应数据,一改全改,一变全变的特性,我们的很多处理也会围绕着他 vuex 是处理数据的,是 vue 的数据仓库 vuex 的作用:采 ...
- leetcode-easy-listnode-88 Merge Sorted Array-NO
mycode 不会........... 参考 思路:从后往前计算,这样不会覆盖nums1中的有效值 由于 You may assume that nums1 has enough space (si ...
- Java中的23种设计模式与7大原则
一.创建型模式 1.抽象工厂模式(Abstract factory pattern): 提供一个接口, 用于创建相关或依赖对象的家族, 而不需要指定具体类.2.生成器模式(Builder patter ...
- 【转】微信接口$GLOBALS['HTTP_RAW_POST_DATA']接收不到值
$xml = $GLOBALS['HTTP_RAW_POST_DATA']; 打印$xml出来,结果是null 使用的是php7,原因是php7已移除这个全局变量,改成 $xml = file_get ...
- 第一章 SpringCloud简介
1.架构演进与微服务 单体架构:一个归档包包含所有的功能的应用程序. 缺点: 复杂性逐渐变高 技术债务逐渐上升 部署速度逐渐变慢 阻碍技术创新 无法按需伸缩 架构演进: 单体架构 SOA 微服务 微服 ...
- "Developer tools access" 需控制另一个进程才能继续调试 解决方案
解决方案: 打开终端输入下边命令: DevToolsSecurity --status 查看状态 DevToolsSecurity --enable 输入密码,修改为enable,即可用 DevToo ...
- Jmeter+Ant+Jenkins接口自动化持续集成环境搭建（Linux）
一.安装说明 系统环境:CentOS release 6.4 JDK版本:jdk1.8.0_181 Jmeter版本:apache-jmeter-3.0 Ant版本:apache-ant-1.9.13 ...
- 部署php程序报错解决---TP框架
1.TP框架中 出现如下错误: 访问网站 http://192.168.0.204/ STORAGE_WRITE_ERROR_:./Runtime/Cache/Home/51620d75af91aa7 ...