html - 将子级放置在父级的底部,直到动态兄弟姐妹填充父级
问题描述
<ul>
我有一个元素,它是动态填充的 a 的兄弟元素
<div>
<ul>
</ul>
<p>hello</p>
</div>
我希望将<p>
其固定在屏幕底部,直到动态<li>
s 要求将其向下推到视图下方。
我尝试了以下但无法得到我想要的结果。
该元素位于底部的正确位置,然后被向下推,但最终被其兄弟姐妹消耗。
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>
推荐阅读
- python - 从 Raspberry Pi(python 程序)写入 S7-1200 plc
- excel - 如何省略创建枢轴
- java - 使用 Nanohttpd 进行文件传输
- screen-orientation - 检测辅助屏幕方向 Visual Basic
- c# - Thread.Sleep 和 Task.Delay 随机挂起且永不结束
- python-3.x - Python 的 lxml 忽略“minOccurs=0”
- java - JDBC 连接字符编码是如何工作的?
- java - 在 log4j.properties 中,带有空间的每日附加程序文件路径不起作用
- teamcity - Teamcity - 如何查看构建代理上的特定文件夹,但保持对 .git 的访问权限?
- gradle - Gradle - 将“编译”更改为“实现”会出错