Question

我正在尝试显示语义-ui侧边栏和全屏幕地图。

这笔交易是我将构建地图事件以切换侧边栏。我的问题在于CSS。

我能够按预期显示所有内容，但我总是会显示菜单上的第一项，推动了很多内容。

这是相关的html结构：

<body>
<div class="ui sidebar vertical menu">
    <a class="item">
        Item 1
    </a>
    <a class="item">
        Item 2
    </a>
    <a class="item">
        Item 3
    </a>
</div>

<div class="pusher">
    <div id="map"></div>
</div>

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/semantic/dist/semantic.min.js"></script>
<script type="text/javascript" src="bower_components/leaflet/dist/leaflet.js"></script>
<script>
    var map = L.map('map').setView([51.505, -0.09], 13);
    $('.ui.sidebar').sidebar('toggle');
</script>
</body>

以下是我对CSS所做的更改：

body {
background-color: #FFFFFF;
display: flex;
height: 100vh;
flex-direction: column;
}

#map {
    height: 100vh;
    width: 100%;
}

在页面加载时以及切换后的行为方式示例：

Answer 1

将推杆的高度设置为100％应该可以解决此问题。

<body>
  <div class="ui right sidebar" id="side_content">
    THIS IS IT
  </div>
  <!-- Search bar for the map -->
  <div class="pusher" style="height:100%">
  <div id="map"></div>
</div>
</body>

引用自：Issue 1664

Answer 2

试试这个

<body>
  
<style>
  .unstyle{
  background: rgba(0,0,0,.0)!important;
}
</style>

<div id="topbar" style="width: 100%; height: 37px;" class="">
  <button id="btn"> toggle</button>
  <button style="float: right"> toggle</button>
</div>
<div id="app" class="" style="height: 94%; width: 100%">
  <div class="ui left vertical menu sidebar unstyle"></div>
  <div class="pusher" style="height: 100%; width: 100%;">
    <div id="mapid"  style="height: 100%; width: 100%; position: relative;"> </div>
  </div>
  <script>
  $('#app .ui.sidebar')
   .sidebar({context: $('#app')})
   .sidebar('setting','transition', 'overlay')
   .sidebar('setting','dimPage', false)
   .sidebar('setting','closable', false)
   .sidebar('attach events', '#btn')
   .sidebar('toggle');
  </script>
</div>

</body>

result screenshot

带语义UI的全屏地图

2 个答案: