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"; /* ...
随机推荐
- mybatis plus 报错 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)
org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) 少了个范型
- oj.1677矩形嵌套，动态规划 ，贪心
#include<iostream> #include<algorithm> #include<cstring> using namespace std; stru ...
- Ruby Programming学习笔记
#将ARGV[0]转换成正则表达式类型 pattern= Regexp.new(ARGV[0]) #Devise gem包 Devise是Ruby中使用最广泛的身份验证gem包之一.Devise为我们 ...
- 黑马lavarel教程---7、文件上传
黑马lavarel教程---7.文件上传 一.总结 一句话总结: 在laravel里面实现文件的上传是很简单的,压根不用引入第三方的类库,作者把上传作为一个简单的http请求看待的. 1.在lavar ...
- windows+VS+Openjdk12 搭建debug环境
openjdk12 下载地址: http://jdk.java.net/archive/ https://download.java.net/java/GA/jdk12/33/GPL/openjdk- ...
- leetcode 135分发糖果
这是一道hard题,不好想,但最后还是想出来了,私以为还是根据一些思想方法自己想出来做法印象比较深刻,其次看人家的做法思想自己写代码,其次看代码理解默写,其次直接抄代码: 首先,给每个孩子都发一个糖果 ...
- 启用 SR-IOV 解决 Neutron 网络 I/O 性能瓶颈
目录 文章目录 目录 前言 Neutron 的网络实现模型 基于虚拟网络设备的虚拟机流量走向 Neutron 网络实现模型的性能瓶颈 SR-IOV 技术简介 在 Neutron 中引入 SR-IOV ...
- 2019.03.30 Dialog demo 一个标准使用的dialog程序
PROGRAM zdemo_dialog. INCLUDE zdemo_dialogtop. INCLUDE zdemo_dialogo01. INCLUDE zdemo_dialogi01. INC ...
- python学习之网络基础
七 网络编程 7.1 C/S B/S架构 7.1.1 认识 Client : 客户端 Browser :浏览器 Server :服务器端 C/S:客户端与服务器之间的构架 B/S:浏览器与服务器之间的 ...
- Java内存溢出
中间件应用Java内存溢出常见的三种情况: 1.OutOfMemoryError: Java heap space 2.OutOfMemoryError: PermGen space 3.OutOfM ...