javascript - 侧边栏在openlayers map下如何设置css

Question

我已经计划了一个侧边栏和 map div。当窗口大小小于 768px 时，侧边栏将不会出现。我想要两列 View 。但是 map 在侧边栏上。

<div class="wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="map-sidebar">                
                <div class="collapse">s</div>
            </div>    
            <div class="map-container">
                <div id="map"></div>
            </div>                    
        </div>
    </div>
</div>

CSS在这里

#map{
    width: 100%; 
    height: 100%;
    position: absolute;
}
.map-container{
     width: 50%;     
}
.map-sidebar{
    position:absolute;
    background-color: rgba(8,8,8, 1.1);
    width:100px;
    height:100%;
    -webkit-box-shadow: 3px 1px 17px 0px rgba(50, 50, 50, 0.43);
    -moz-box-shadow:    3px 1px 17px 0px rgba(50, 50, 50, 0.43);
    box-shadow:         3px 1px 17px 0px rgba(50, 50, 50, 0.43);
}

.map-sidebar .collapse{
    width:30px;
    height:40px;
    background-color: #fff;
}

@media(max-width:768px){
    .map-sidebar{display:none}
}

工作 jsfiddle code is here .

Answer 1

要将两个元素并排放置，试试这个:

.map-container{
  width: calc(100% - 100px);
  height:100%;
  position:absolute;
  left:100px;
}
.map-sidebar{
  position:absolute;
  background-color: rgba(8,8,8, 1.1);
  width:100px;
  left:0;
  top:0;
  height:100%;
  -webkit-box-shadow: 3px 1px 17px 0px rgba(50, 50, 50, 0.43);
  -moz-box-shadow:    3px 1px 17px 0px rgba(50, 50, 50, 0.43);
  box-shadow:         3px 1px 17px 0px rgba(50, 50, 50, 0.43);
}