今天在整理之前IFEde作业,发现有个简历的效果好像没实现.于是想把样式改成作业要求的那样.

作业要求是这样的:

右边栏昨晚高度是839px,我想把左边栏做成高度自适应的.但是没成功.现在我把这个问题记录在这里,留待以后解决.

首先, 大的布局是做成2栏的,左边是带背景的"简历",右边是详细的信息.

·首先实现2栏布局:左边栏左浮动,右边栏设置左边距.

·然后实现高度自适应:思路是左边栏已经撑开了父元素body的高度,只要左边栏设置一个高度100%就好了.但是并没有成功.

查了一些资料,了解到如果我要设置子元素高度100%,按道理浏览器会去查询父元素的高度,表面上看body已经被右边栏撑开,是有一个高度的,但是因为没有显式设置高度,body的高度实际上是auto,子元素是不可能根据一个auto值来设置高度的.解决办法是给这个元素的所有父元素的高度设定一个有效值.于是我设置了html,body,高度为100%.

现在左边栏有高度了,但是并没有和右边栏等高,而是固定在了671px.并且html和body的高度也固定在了671px.我用2个div模拟了这个大的布局,结果高度还是固定在了671px,然而我突然意识到,这个高度是我浏览器的视口高度.单一使用浮动,或者绝对定位并没有办法解决这个问题.


所以目前测试看来,html,body,高度设置为100%.,只会把高度固定在视口高度.

使用flex布局align-items: stretch;可以实现高度自适应.

高度自适应的bug的更多相关文章

  1. css经典布局——头尾固定高度中间高度自适应布局

    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...

  2. div中iframe高度自适应问题

    网页分为上.中.下三部分,上.下高度固定中间高度自适应:中间分为左.右两部分,左边宽度固定,右边宽度自适应.现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外 ...

  3. 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...

  4. CSS完美实现iframe高度自适应（支持跨域）

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...

  5. element el-table表格的vue组件二次封装（附表格高度自适应）

    基于vue的el-table表格二次封装组件方法 前言 在公司实习使用vue+element-ui框架进行前端开发,使用表格el-table较为多,有些业务逻辑比较相似,有些地方使用的重复性高,如果多 ...

  6. iOS开发之多种Cell高度自适应实现方案的UI流畅度分析

    本篇博客的主题是关于UI操作流畅度优化的一篇博客,我们以TableView中填充多个根据内容自适应高度的Cell来作为本篇博客的使用场景.当然Cell高度的自适应网上的解决方案是铺天盖地呢,今天我们的 ...

  7. iframe高度自适应（同域）

    今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElemen ...

  8. div仿textarea使高度自适应

    今天真的有些无语,在百度上找了很多关于textarea和input高度自适应的代码,并且考虑到了要判断textarea的滚动条,从而动态改变它的高度,直到我搜索了这个让我目瞪狗呆的办法…… <d ...

  9. 【代码笔记】iOS-UILable高度自适应(sizeWithFont)

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...

随机推荐

  1. 「干货」常用的10个网络DOS命令，菜鸟学了变高手

    1 ping命令 1命令格式 ping 主机名 ping 域名 ping IP地址 如图所示,使用ping命令检查到IP地址210.43.16.17的计算机的连通性,该例为连接正常.共发送了四个测试数 ...

  2. MyBatis逆向工程中domainObjectRenamingRule报错或无效

    使用domainObjectRenamingRule报错 在使用MyBatis逆向工程时报错如下: org.mybatis.generator.exception.XMLParserException ...

  3. Python -3-列表和元组

    1.用list就可以像修改列表那样修改字符串了 >>> list('Hello') ['H', 'e', 'l', 'l', 'o'] 可将任何序列作为list的参数   2.列表的 ...

  4. [題解]luogu_P1120小木棍（搜索）

    好久以前抄的題解,現在重新抄題解做一下 1.對所有木棍從大到小排序,後用小的比較靈活 2.限制加入的木棍單調遞減,因為先/后用長/短木棍等價,反正就是那兩根 3.預處理出重複木棍的位置,防止重複搜索相 ...

  5. kojs select绑值(工作)

    <!DOCTYPE html>   <html> <head> <meta charset="utf-8" />   <tit ...

  6. 牛客小白月赛13 E（图、矩阵幂）

    AC通道 如果建立第一天某点到某点有几条路的矩阵,做k次矩阵乘就是第k天某点到某点有几条路.统计即可. #include <bits/stdc++.h> using namespace s ...

  7. Ubuntu下修改权限时出现"unable to execute /bin/chmod: Argument list too long"

    Ubuntu14.04下修改权限时出现"unable to execute /bin/chmod: Argument list too long"   ,大概意思是卧槽,你这参数也 ...

  8. 服务器 未能加载文件或程序集“XXXX”或它的某一个依赖项。试图加载格式不正确的程序。

    ,本人采用的第一种解决办法解决,已解决 问题2: 在同一个服务器上想要一个IP有两个网址,配置端口号,给新端口号开权限

  9. Apache——DBUtils框架ResultSetHandler接口使用

    参考链接:http://i.cnblogs.com/EditPosts.aspx?opt=1 简介 commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDB ...

  10. ssh框架出现Java.lang.NoSuchMethodError: antlr.collections.AST.getLine()I错误

    原因:因为Struts自带的antlr-2.7.2.jar,比Hibernate自带的antlr-2.7.7.jar的版本要低,存在jar包冲突现象,因此要删除前一个低版本的. 由于myeclipse ...