将div放在屏幕底部而不是父级底部
将div放在屏幕底部而不是父级底部
提问于 2019-06-27 04:44:27
我有一个特殊的html结构，它模拟了一个页面的应用程序结构。
请先访问JsFiddle了解问题。
.screen-emulator {
width: 300px;
height: 400px;
background-color: red;
}
.head {
width: 100%;
height: 70px;
background-color: blue;
}
.body {
width: 100%;
height: 100%;
overflow-y: auto;
}
.page {
position: relative;
width: 100%;
height: 500px;
background-color: black;
}
.page-test {
position: absolute;
width: 100%;
height: 100%;
background-color: violet;
}<div class="screen-emulator">
<div class="head">Head</div>
<div class="body">
<div class="page">
<div class="page-test">page-test</div>
</div>
</div>
</div>
所以我的问题是:在css中，有没有一种方法可以让.page-test一直走到屏幕结束，而不是他的父母(.page)结束？
这里的问题是来自.page-test的height: 100%;属性，它将使它一直到.page底部。我倾向于指定我将不能更改HTML结构(即使它解决了问题)，并且我事先不知道HTML的高度
回答 5
Stack Overflow用户
回答已采纳
发布于 2019-06-27 07:19:43
如果我没理解错的话，我想flexbox就是答案。
首先，显式地设置所有元素的边距和填充为零(有时称为引导)，这将覆盖浏览器应用的任何默认用户代理样式。
将.screen-emulator height设置为100vh，并将其设置为flexbox容器。您不想更改.head的未知高度，因此我们设置了flex: none;。.body是唯一一个使用flex: 1;保持剩余可用高度的flex项目。https://css-tricks.com/boxes-fill-height-dont-squish/
body,
.screen-emulator,
.head,
.body,
.page,
.page-test {
margin: 0;
padding: 0;
}
.screen-emulator {
width: 300px;
height: 100vh;
background-color: red;
display: flex;
flex-direction: column;
}
.head {
width: 100%;
background-color: blue;
flex: none;
}
.body {
width: 100%;
flex: 1;
overflow-y: auto;
}
.page {
position: relative;
width: 100%;
min-height: 100%;
background-color: black;
}
.page-test {
position: absolute;
width: 100%;
min-height: 100%;
background-color: violet;
}<div class="screen-emulator">
<div class="head">
<h1>Head</h1>
<p>Random content</p>
</div>
<div class="body">
<div class="page">
<div class="page-test">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Senectus et netus et malesuada fames ac turpis egestas. Massa tincidunt dui ut ornare lectus sit amet. Posuere ac ut consequat
semper viverra nam libero justo laoreet. Sit amet commodo nulla facilisi nullam vehicula ipsum a arcu. Phasellus vestibulum lorem sed risus. Congue eu consequat ac felis donec et odio pellentesque diam. Consectetur lorem donec massa sapien faucibus
</p>
<p>
Nisl suscipit adipiscing bibendum est ultricies integer quis. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Netus et malesuada fames ac turpis egestas. Ultricies mi quis hendrerit dolor magna eget. Tellus mauris
a diam maecenas sed enim. Turpis massa tincidunt dui ut ornare lectus sit. Dolor magna eget est lorem ipsum. Sit amet consectetur adipiscing elit ut. Id donec ultrices tincidunt arcu non sodales. Interdum consectetur libero id faucibus nisl
</p>
</div>
</div>
</div>
</div>
Stack Overflow用户
发布于 2019-06-27 04:51:07
.page-test {position: absolute;bottom: 0;width: 100%; height: 50%;background-color:violet;}这就是你要找的东西吗？我更改了您的高度，以便在JsFiddle中显示得更好
Stack Overflow用户
发布于 2019-06-27 04:54:37
这就是你的意思吗？
您可以根据视图高度vh进行计算。请注意，在旧浏览器中，calc是而不是。
更新到新规范的
由于需求是为了满足.head元素的动态高度，因此您将需要JavaScript来实现这一点。CSS不是为了从DOM获取值然后应用它而设计的。这就是我们有JavaScript的原因
document.addEventListener('DOMContentLoaded', function() {
resizePage();
}, false);
document.addEventListener("resize", resizePage);
function resizePage() {
var head = document.querySelector(".head");
var pageTest = document.querySelector(".page-test");
pageTest.style.height = "calc(100vh - " + head.offsetHeight + "px)";
}.screen-emulator {
width: 300px;
height: 400px;
background-color: red;
}
.head {
width: 100%;
height: 70px;
background-color: blue;
}
.body {
width: 100%;
height: 100%;
overflow-y: auto;
}
.page {
position: relative;
width: 100%;
height: 500px;
background-color: black;
}
.page-test {
position: absolute;
width: 100%;
height: 100vh;
background-color: violet;
}<div class="screen-emulator">
<div class="head">Head</div>
<div class="body">
<div class="page">
<div class="page-test">page-test</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56780618
复制相关文章
相似问题