我正在尝试制作一个看似简单的布局。尽管看了很多例子,我还是无法破解它。
SideBar| .......MapContainer......
SideBar| ..........Map............
SideBar| .......MapContainer......
SideBar 和 MapContainer 都应该是 100% 高度。
棘手的一点: map 必须有定义的高度和宽度,因为 mapbox-gl-js 库使用它的尺寸来填充它。 (而不是添加内容然后调整它的大小)。
MapContainer 的存在是因为其中会有其他绝对定位的叠加元素。
我试图避免将边栏宽度编码到 MapContainer 的定义中,这样我就可以在 JS 中隐藏/显示边栏,并让 MapContainer 自动填充空间。
这变得非常非常接近:
* {
box-sizing: border-box;
}
.sidebar, .mapcontainer, .container {
height: 200px;
}
.container {
width:100%;
border:1px solid;
display: flex
}
.sidebar {
width:200px;
background:lightblue;
}
.mapcontainer {
width:auto;
background:lightgreen;
position:relative;
flex-grow: 1;
}
.map {
width: 100%;
height: 100%;
position:absolute;
border: 20px dashed grey;
}
<div class="container">
<div class="sidebar"></div>
<div class="mapcontainer">
<div class="map">
</div>
</div>
</div>
但是一旦我将“高度:200px”更改为“高度:100%”,它就会崩溃。我需要做什么?
最佳答案
在 .sidebar, .mapcontainer, .container
规则中使用视口(viewport)单位 vh
* {
box-sizing: border-box;
}
html, body {
margin: 0;
}
.sidebar, .mapcontainer, .container {
height: 100vh;
}
.container {
border: 1px solid;
display: flex
}
.sidebar {
width: 200px;
background:lightblue;
}
.mapcontainer {
background:lightgreen;
position:relative;
flex-grow: 1;
}
.map {
width: 100%;
height: 100%;
position:absolute;
border: 20px dashed grey;
}
<div class="container">
<div class="sidebar"></div>
<div class="mapcontainer">
<div class="map">
</div>
</div>
</div>
关于html - 占据所有剩余空间的 div 中的绝对定位 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42238513/