html - 使用 bootstrap 并尝试创建一个容器，该容器占据导航栏底部和 View 末端之间 100% 的空间

Question

我正在尝试在我的 React 应用程序中构建一个类似于您在 Zillow 上看到的 map View 。这是一个屏幕截图:

Zillow

不幸的是，我不确定将容器设置为可用房地产之间 100% View 的最佳方式。

这是标记(包括一些其他组件，因此您可以看到它是如何适合的)

<Navbar></Navbar>
<SearchByMap>
  <!-- just gonna put the basic html of this component here -->
  <div class="container">
    <div class="map-view">
    </div>
    <div class="list-view>
    </div>
  </div>
</SearchByMap>

当我将 container 的高度设置为 100% 时，它什么也没做。但是，鉴于此布局，我如何才能确保它很好地适应 overflow: hidden，使其类似于 Zillow 处理其 map View 的方式？

谢谢

Answer 1

通过将父元素的高度设置为 100% 或 100vh，然后将 flex-grow: 1; 应用到要使用所有可用空间增长的元素，您可以使用 flexbox 轻松地做到这一点。

*{margin:0;padding:0;}

body,html {
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
}

Navbar {
  background: #eee;
}

SearchByMap {
  flex-grow: 1;
  background: #ccc;
}

<Navbar>nav</Navbar>
<SearchByMap>
  <!-- just gonna put the basic html of this component here -->
  <div class="container">
    <div class="map-view">
    </div>
    <div class="list-view>
    </div>
  </div>
</SearchByMap>