gpt4 book ai didi

html - 将 child 放在 parent 的底部,直到动态 sibling 填满 parent

转载 作者:行者123 更新时间:2023-11-28 00:23:04 27 4
gpt4 key购买 nike

我有一个元素是 <ul> 的兄弟元素动态填充

<div>
<ul>
</ul>
<p>hello</p>
</div>

我想要 <p>固定在屏幕底部直到动态<li> s 要求将其向下推到 View 下方。

我尝试了以下但无法获得我想要的结果。

该元素位于底部的正确位置,然后被向下推,但最终被其 sibling 消耗。

for(var i =0; i < 50; i++){
var value = document.querySelector('input').value

var node = document.createElement("LI"); // Create a <li> node
var textnode = document.createTextNode("Water"); // Create a text node
node.appendChild(textnode); // Append the text to <li>
document.querySelector("ul").appendChild(node);
}
div {
height: auto;
min-height: 90vh;
position: relative;
}
p {
position: absolute;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<input type='text' value='dsaf'/>
<ul>
</ul>
<p>hello</p>
</div>
</body>
</html>

请注意在代码片段中,子段落如何被其兄弟段落向下推,然后与它们重叠。

最佳答案

这是?

我添加了 padding-bottom:30px;div

for(var i =0; i < 25; i++){
var value = document.querySelector('input').value

var node = document.createElement("LI"); // Create a <li> node
var textnode = document.createTextNode("Water"); // Create a text node
node.appendChild(textnode); // Append the text to <li>
document.querySelector("ul").appendChild(node);
}
div {
height: auto;
min-height: 90vh;
position: relative;
padding-bottom:30px;
}
p {
position: absolute;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<input type='text' value='dsaf'/>
<ul>
</ul>
<p>hello</p>
</div>
</body>
</html>

关于html - 将 child 放在 parent 的底部,直到动态 sibling 填满 parent ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54786138/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com