项目里面遇到一个布局：

然后侧边栏菜单的高度要随着内容的高度变化而变化；所以在这里贴一下代码；效果如下

<!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的样式问题的更多相关文章

  1. 精简的网站reset 和 css通用样式库

    参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...

  2. css初始化样式代码

    为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...

  3. 漂亮的CSS按钮样式集以及在线生成工具

    以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...

  4. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  5. html / css打印样式

    最近做公司后台系统,需要打印贴箱标签,按照正常打印A4纸的标准,测试的效果不是自己想要的,文字排版布局都乱了,查了一些资料,需要设置的东西我总结了一下: 显示器(screen)和打印机(printer ...

  6. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  7. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...

  8. 第 15 章 CSS 文本样式[上]

    学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇 本节 ...

  9. CSS常用样式（四）之animation

    上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...

  10. CSS Reset样式重置

    为了让页面在各不同浏览器之间显示效果一致,CSS样式清除和重置是前端开发必需要做的事情,结合前车之鉴,整理了份CSS重置样式代码供参考. @charset "utf-8"; /* ...

随机推荐

  1. Struts1与Struts2区别？

    (1)Struts1执行过程: <1>Web容器启动的时候ActionServlet被初始化,加载struts-config.xml配置文件. <2>浏览器发送请求到Actio ...

  2. C++入门经典-例3.11-使用if语句来实现根据输入的字符输出字符串

    1:代码如下: // 3.11.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...

  3. linux pwd指令的C实现

    linux pwd指令的C实现 pwd指令的功能介绍 linux pwd命令用于显示工作目录 执行pwd命令可立刻得知当前所在工作目录的绝对路径名称. 示例: 查询系统手册 如图所示,getcwd的描 ...

  4. js对数组分组处理

    一.js数组分组 1.js对数据分组类似group by 源码如下: <!DOCTYPE html> <html lang="en"> <head&g ...

  5. N2RR

    一.背景 氨(NH 3)是一种新兴的能量载体,在液氨中含有17.6%(重量)的氢,而在甲醇中的含量为12.5%(重量),很可能成为未来氢能经济的有希望的候选者.然而,如果基于NH 3的肥料不足以养活世 ...

  6. 【Python】格式化输出json

    参考文档: Python JSON JSON 函数 使用 JSON 函数需要导入 json 库:import json. 函数 描述 json.dumps  将 Python 对象编码成 JSON 字 ...

  7. Selenium 2自动化测试实战20（操作cookie）

    一.操作cookie 有时候我们需要验证浏览器中cookie是否正确,因为基于真实cookie的测试是无法通过白盒和集成测试的.WebDriver提供了操作Cookie的相关方法,可以读取.添加和删除 ...

  8. 阶段3 2.Spring_04.Spring的常用注解_2 常用IOC注解按照作用分类

    注解配置和xml的配置要实现的功能都是一样的.都是要降低程序间的耦合,只不过配置的形式不一样 打包方式改成jar 加入spring 的依赖 复制之前的代码过来 复制到我们新建的工程里 resurces ...

  9. 三十六：数据库之SQLAlchemy外建之一对一关系

    relationship()的uselist参数默认为True,即一对多,如果要一对一,则需让uselist=False 准备工作 from sqlalchemy import create_engi ...

  10. Maximum Likelihood 最大似然估计

    Maximum Likelihood 最大似然估计 这个算法解决的问题是,当我们知道一组变量的密度分布函数与从总体采样的个体的时候,需要估计函数中的某些变量. 假设概率密度函数如下: 一般来说,为了计 ...