今天在整理之前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. luogu P3600 随机数生成器【dp】

    把期望改成方案数最后除一下,设h[i]为最大值恰好是i的方案数,那么要求的就是Σh[i]*i 首先包含其他区间的区间是没有意义的,用单调栈去掉 然后恰好不好求,就改成h[i]表示最大值最大是i的方案数 ...

  2. web前端篇：JavaScript正则表达式

    目录 JavaScript正则表达式 1.创建正则表达式 1.1方法1:直接量语法 1.2 方法2:创建RegExp对象的语法 1.3 区别: 1.4正则表达式使用 2.正则对象的属性 2.1.属性 ...

  3. PostgreSQL-8-数据合并

    -- 1.JOIN与UNION的区别详解 CREATE TABLE t1(id int,value1 text); ,,,'c'); -- 创建表格t1 CREATE TABLE t2(id int, ...

  4. redis集群模式

    1 弊端和优势 弊端:相比单机模式,集群模式会在节点之间同步数据,会降低20%-30%的性能,同时增加架构复杂性,提高硬件成本和学习成本. 优势:增加冗余,避免单点故障.单机模式如果要重启,必然会丢失 ...

  5. 最短路之Dijkstra（单源）HDU 2544

    #include <iostream> using namespace std; ; ][]; ]; int middist; ]; void dijkstra(int n,int m) ...

  6. Codeforces Round #533(Div. 2) D.Kilani and the Game

    链接:https://codeforces.com/contest/1105/problem/D 题意: 给n*m的地图,最多9个人,同时有每个人的扩张次数(我开始以为是直线扩张最大长度..实际是能连 ...

  7. HDU6301(2018多校第一场）

    Bryce1010模板 http://acm.hdu.edu.cn/showproblem.php?pid=6301 队友AC的,没怎么看 #include<iostream> #incl ...

  8. SSIS Passing Parameters to an ADO .NET Source query；向ado.net数据源传递参数。

    使用SSIS的oledb数据源时的参数按钮如下图: 但是在使用ADO.NET源连接到MYSQL时,没有这个参数按钮,如何向数据流的sql command传递参数呢? steps: 1. 在 控制流 选 ...

  9. vue初级学习--使用 vue-resource 请求数据

    一.导语 我发现好像我最近几次写文,都是在7号,很恰巧啊~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  10. odoo9 部署步详细步骤

    sudo apt-get updatesudo apt-get dist-upgrade 一:安装和配置pg sudo apt-get install  postgresql sudo su - po ...