高度自适应的bug

今天在整理之前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;可以实现高度自适应.

 

转载于:https://www.cnblogs.com/KlllB/p/9688854.html