今天在整理之前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. bzoj 4873: [Shoi2017]寿司餐厅【最大权闭合子图】

    有正负收益,考虑最小割 因为有依赖关系,所以考虑最大权闭合子图 首先对每个d[i][j]建个点,正权连(s,id[i][j],d[i][j])并加到ans上,负权连(id[i][j],t,-d[i][ ...

  2. java 程序从linux 上接收不可见字符

    近期在写一个简单的小java程序,希望在运行java 程序时,从shell 中接收参数,并且参数的内容为不可见字符. 开始时还觉得可以使用"\"之类的转义符来写,后来发现java程 ...

  3. shell chpasswd 命令 修改用户密码

    使用useradd 命令增加一个用户后,它默认是没有设置密码的.如果需要给用户设置或者修改密码,一般会使用passwd命名. 但是passwd命令有一个缺陷,它需要人工交互操作. 如果你是一名系统管理 ...

  4. python虚拟环境四

    python虚拟环境管理器 我们在使用python虚拟环境的时候,最好安装一个虚拟环境管理器,这样我们就能很方便的管理python的 虚拟环境,而python的虚拟环境管理工具包就是virtualen ...

  5. 网络流--Dinic(自用，勿看)

    注意:这是一篇个人学习笔记,如果有人因为某些原因点了进来并且要看一下,请一定谨慎地阅读,因为可能存在各种奇怪的错误,如果有人发现错误请指出谢谢! https://www.luogu.org/probl ...

  6. python之函数名,闭包、迭代器

    一.函数名的运用(第一类对象) 函数名是一个变量,但它是一个特殊的变量,与括号配合可以执行函数的变量. 1,函数名的内存地址: def func(): print("呵呵") pr ...

  7. 2个sql 函数dbms_lob.substr 和 wm_concat

    转自: http://blog.csdn.net/wenzhongyan/article/details/50315473 http://blog.csdn.net/ojerryzuo/article ...

  8. Springboot的static和templates

    static和templates部分参考博客:https://blog.csdn.net/wangb_java/article/details/71775637 热部署参考博客:https://www ...

  9. 51nod 1640 天气晴朗的魔法 二分 + 克鲁斯卡算法(kruskal算法) 做复杂了

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1640 一开始想的时候,看到要使得最大值最小,那这样肯定是二分这个最大值了 ...

  10. Linux 查找bom头文件，清除bom头命令

    1.查找bom头文件 grep -r -I -l $'^\xEF\xBB\xBF' ./ 2.替换bom头文件 find . -type f -exec sed -i 's/\xEF\xBB\xBF/ ...