我正在使用以下代码创建页面布局。我得到的容器div高度适合于窗口高度,但是当我调整窗口高度的大小时,所有内容垂直地被挤压在一起。如何确定容器div的高度和宽度?
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
margin: 0 auto;
width: 800px;
height:100vh;
background-color: azure;
}
#rw1 {
height: 10vh;
background-color: aliceblue;
}
#rw2 {
height: 80vh;
background-color: #ff6a00;
}
#rw3 {
height: 10vh;
background-color: #808080;
}
</style>
<div id="container">
<div id="rw1"></div>
<div id="rw2"></div>
<div id="rw3"></div>
</div>
最佳答案
这是一个开放式的问题,但我认为您可能想尝试使用媒体查询,特别是使用max-width
和max-height
的组合,如下所示:
@media (max-height: 300px) {
#rw1 {
height: 33vh;
background-color: aliceblue;
}
#rw2 {
height: 33vh;
background-color: #ff6a00;
}
#rw3 {
height: 33vh;
background-color: #808080;
}
}
也可以如下组合
max-width
/ max-height
:@media (max-width: 767px), (max-height: 300px) {
#container {
width: 750px;
}
#rw1 {
height: 33vh;
background-color: aliceblue;
}
#rw2 {
height: 33vh;
background-color: #ff6a00;
}
#rw3 {
height: 33vh;
background-color: #808080;
}
}
这是一个小提琴:https://jsfiddle.net/9vwe255a/
尝试在“结果”窗格中调整宽度和高度的大小,您会注意到div根据视口的更改大小。
关于html - 如何使容器div高度适合窗口高度,但不随窗口大小调整大小,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37972136/