[英]Expand height of div to reach bottom of container from it's initial position
I have a basic HTML page set up with a container with content and a child element at the bottom with no set height like this: 我有一个基本的HTML页面,其中设置了一个包含内容的容器,并在底部具有一个子元素,没有设置高度,如下所示:
<div id="parent">
^
|
| //other elements here of variable height depending on content output
|
|
v
<div id="child"></div>
</div>
Now the parent
has a size of lets say 500px
in height
. 现在
parent
height
可以说是500px
。
What i want to do, is to get the current position of child
(which currently has not got a set height) relative to the container, and then calculate the height needed to expand the child to the bottom of the parent. 我想做的是获取相对于容器的
child
的当前位置(当前尚未设置高度),然后计算将子对象扩展到父对象底部所需的高度。
The issue is how do i get the current position for top:
of child
relative to parent? 问题是我如何获得当前的
top:
职位top:
child
相对于父母的地位? That way I can calculate how much height is required to reach the bottom of the parent and then use myEl.style.height = height+'px';
这样,我可以计算出到达父级底部所需的高度,然后使用
myEl.style.height = height+'px';
I don't know if this matters but i am not using position absolute/relative. 我不知道这是否重要,但我没有使用绝对/相对位置。 I am using default display.
我正在使用默认显示。
Side note: 边注:
I would welcome a pure CSS
solution if
it is more elegant and not hacky compared to JS
, but i could not find a CSS property to do this. if
与JS
相比,它更优雅,更不客气,我将欢迎使用纯CSS
解决方案,但是我找不到CSS属性来执行此操作。
html, body { height:100%; } #parent { position:relative; height:auto; } #child { position:relative; height:100%; background:#ccc; }
<div id="parent">Parent div <p>► fix grammatical or spelling errors ► clarify meaning without changing it ► correct minor mistakes ► add related resources or links ► always respect the original author</p> <p>► fix grammatical or spelling errors ► clarify meaning without changing it ► correct minor mistakes ► add related resources or links ► always respect the original author</p> <p>► fix grammatical or spelling errors ► clarify meaning without changing it ► correct minor mistakes ► add related resources or links ► always respect the original author</p> <p>► fix grammatical or spelling errors ► clarify meaning without changing it ► correct minor mistakes ► add related resources or links ► always respect the original author</p> <div id="child">Child div - Some text</div> </div>
Normal flow: i think this is what you mean. 正常流程:我认为这就是您的意思。 i'm sorry i do not understand your question very well.
对不起,我不太了解您的问题。
N: N:
a block-level element height is, if not set, designed to fit hes children
块级元素的高度(如果未设置)设计为适合孩子
so .child
height is 100% (he fit it's content) .parent
height is 100% (he fit it's content) so is no height is set to .parent
the .child
will always hit bottom. 所以
.child
高度为100%(他适合它的内容) .parent
高度为100%(他适合它的内容),所以没有高度设置为.parent
的.child
总会触底。 If .parent
height is set greater than 100% (5000px example) you need to position both .child
(absolute to hit bottom) & .parent
(relative, to be an position ancestor). 如果将
.parent
高度设置为大于100%(例如5000px),则需要同时定位.child
(绝对到达底部)和.parent
(相对,作为位置祖先)。
div.spaceTruck { outline: 1px solid green; background-color: lime; } div.spaceTruck > span { color: white; background-color: black; display: block; } div.spaceTruck > div { position: relative; font-size: 40px; padding: 50px; background-color: red; }
<div class="spaceTruck"> <span>Dark content</span> <span>Dark content</span> <span>Dark content</span> <span>Dark content</span> <span>Dark content</span> <span>Dark content</span> <span>Dark content</span> <span>Dark content</span> <span>Dark content</span> <span>Dark content</span> <div> spaceeeetruckking!!! </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.