position:relative的层如何自适应内部position:absolute层的高度？

ruby0602 2012-01-09 09:55:32

最好是用css解决，谢谢

...全文

1840 6 打赏收藏转发到动态举报

写回复

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

myleihao_88 2012-01-17

打赏
举报

回复

这个用纯css应该解决不了，就算是普通的层，高度也不会继承

luliangshu350 2012-01-10

打赏
举报

回复

[Quote=引用 4 楼 ruby0602 的回复:]

外层是relative，内层是absolute
[/Quote]

不管内外。他实际上已经脱离了文档流了。不会自适应了。你想想看你可以把内层元素摆在任何一个位置。包括在外层元素的外面。而且外层元素也不影响。就能看出来他已经脱离的文档流了。所以你里面元素随便怎么变也不可能影响外面的元素

ruby0602 2012-01-10

打赏
举报

回复

外层是relative，内层是absolute

luliangshu350 2012-01-10

打赏
举报

回复

[Quote=引用楼主 ruby0602 的回复:]
最好是用css解决，谢谢
[/Quote]

这个不能吧设置成position的元素实际上已经脱离的文档流。

MuBeiBei 2012-01-10

打赏
举报

回复

[Quote=引用楼主 ruby0602 的回复:]
最好是用css解决，谢谢
[/Quote]

外层是position:relative？还是内层是 position:relative？

如果外层是相对对位，OK。能用CSS解决。

用padding-top百分比可以实现宽度固定高度按比例展示，现在的需求是对一个video视频的盒子div高度是固定的，宽度如何按比例展示？解决后效果如图：红框标注的即是我在上面高度比例固定的范围内宽度自适应的效果； css代码： .content { margin: 0 auto; height: 79vh; .video_box { position: relative; height: 100%; overflow: hidden; margin: 0 auto;

说在前面文档流文档流包括浮动流、定位流以及普通的标准流。一、常见的几种页面布局静态布局定位布局流式布局弹性布局 自适应布局响应式布局圣杯、双飞翼、栅格布局 1、静态布局特点：传统的网页布局形式，页面上的所有元素的尺寸均使用px（像素）作为单位，当屏幕缩小的时候，会出现滚动条优点：代码简单，编写容易，且无兼容性问题缺点：无法根据不同的屏幕尺寸做出相应的表现 2、定位布局特点：使用 position 属性定义定位类型，并指定元素位置来布局 position部分属性：static、fixed、relative、absolute、sticky 堆叠顺序使用 z-ind

position:absolute元素高度自适应，换成relative设置top试试这篇文章发布于 2019/11/08，归类于 CSS标签：position:absolute元素高度自适应，怎么用js计算元素高度一般元素设置position:absolute后，就已经脱离了文档流，用css是无法计算其高度的，只能用js获取dom来计算。另外不要把自己限制死了，对于自适应高度的，为什么一定要使用p...

css基础：position定位、高度自适应、伪元素、实线三角形-第十天

今天遇到父元素高度无法自适应子元素的高度问题，试了各种清除浮动都无效，各种百度才弄明白。问题描述：父元素有position：relative ；两个子元素都是position：absolute；（因为经常念叨父R子A习惯性布局）；中间试了各种清除浮动的办法，均无法使父元素产生高度；产生原因：因为position：absolute会脱离标准流，所以父元素无法自适应子元素高度，而清除...

61,112

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章