我有一个特殊的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的高度
发布于 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>
发布于 2019-06-27 04:51:07
.page-test {position: absolute;bottom: 0;width: 100%; height: 50%;background-color:violet;}
这就是你要找的东西吗?我更改了您的高度,以便在JsFiddle中显示得更好
发布于 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>
https://stackoverflow.com/questions/56780618
复制相似问题