全屏显示页面的一部分

Question

我有一个像这样的HTML代码：

<header>title</header>

<content class="container-fluid">
  <div class="row">
    <div class="col-sm-3 leftside">
      <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
      </ul>
    </div>
    <div class="col-sm-9">
      <div id="map"></div>
    </div>
  </div>
</content>

<footer>footer</footer>

我想在一个监视器屏幕上显示代码的内容部分。

谷歌地图必须是全屏（和响应）。

并且侧面菜单必须全屏（对于更多行，它必须在其列中使用滚动）

我该怎么做？

demo code sample

编辑：

当我用浏览器打开页面时，我可以看到标题和内容（全屏）和滚动我可以看到页脚部分。

Answer 1

在这里你去...看下面的片段。此外，这里https://jsfiddle.net/darrendiscovr/s1vp1348/和没有谷歌地图API错误。

5分钟阅读自助文档https://getbootstrap.com/将让您走上正确的轨道，让学习他们的组件变得轻而易举。

var settingsItemsMap = {
  zoom: 12,
  center: new google.maps.LatLng(40.768516981, -73.96927308),
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE
  },
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), settingsItemsMap);

var myMarker = new google.maps.Marker({
  position: new google.maps.LatLng(40.768516981, -73.96927308),
  draggable: true
});

map.setCenter(myMarker.position);
myMarker.setMap(map);

nav {
  background: red;
  color: #fff;
}

.sidebar {
  position: fixed;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  padding: 20px 0;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid #eee;
  background: lightblue;
}

main.col-sm-9.ml-sm-auto.col-md-10 {
  padding: 0;
}

section.content {
  padding: 2em;
  height: 100vh;
}

#map {
  height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<header>
  <nav class="navbar fixed-top">
    <a class="navbar-brand">
      Title
    </a>
  </nav>
</header>

<div class="container-fluid">
  <div class="row">
    <nav class="col-sm-3 col-md-2 sidebar">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Menu 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu 3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">...</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">...</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">...</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">...</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">...</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">...</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">...</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">...</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu Last</a>
        </li>
      </ul>
    </nav>

    <main role="main" class="col-sm-9 ml-sm-auto col-md-10">
      <section class="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ante quam, accumsan vitae augue ut, pharetra placerat ligula. Nam sed lorem augue. Donec ipsum velit, mattis sit amet nibh eu, ultrices porta nulla. In dictum ex ligula, eu efficitur metus
          pretium et. Aliquam convallis dictum justo in imperdiet. Praesent tincidunt orci et fringilla consequat. Fusce convallis, dolor in mollis gravida, leo risus hendrerit magna, id sagittis nisl tellus quis ex. Mauris rutrum aliquam eleifend. Nullam
          dignissim dictum rutrum. Nam tristique mattis nunc nec pretium. Ut at maximus nibh. Donec vel semper sapien, eget semper neque. Maecenas felis magna, condimentum ac ipsum vitae, auctor egestas massa. Nunc vulputate accumsan sem et vehicula.
          Nulla ac lorem congue tortor pharetra feugiat. Curabitur lacinia, nisl quis vestibulum convallis, lorem lectus bibendum elit, sed finibus sapien tortor a orci.
        </p>
      </section>
      <section>
        <div id="map"></div>
      </section>

    </main>
  </div>
</div>