Responsive height layout with dynamic height elements

问题

I am trying to build a layout with a menubar and a main container that includes a searchbar, left sidebar, and a results table.

I want the main container to always be as tall as possible for the window and the left sidebar and results table to also be as tall as possible within the main container.

This is how this would look with fixed heights on everything:

https://jsfiddle.net/m45cakne/1/

<div class="menubar"></div>

<div class="main-section">
  <div class="searchbar">
  </div>
  <div class="section-content">
    <div class="sidebar"></div>
    <div class="results-table"></div>
  </div>
</div>

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.menubar {
  height: 50px;
  border: 1px solid black;
}

.main-section {
  border: 1px solid black;
  margin-top: 20px;
  height: 600px;
}

.searchbar {
  border: 1px solid black;
  margin: 20px;
  height: 50px;
}

.section-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-right: 25px;
  padding-left: 25px;
  flex: 1;
}

.sidebar {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
  border: 1px solid black;
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  height: 490px;
}

.results-table {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
  position: relative;
  width: 100%;
  min-height: 1px;
  border: 1px solid black;
  height: 490px;
  padding: 0px;
}

The menubar height can change as the page is viewed on different devices, and the searchbar height can also change as it is filled with search terms.

What would be the right method to build this responsive layout with CSS?

回答1:

Just use flex properties all the way through:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

.menubar {
  flex: 0 0 50px;
  border: 1px solid black;
}

.main-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  margin-top: 20px;
  padding: 25px;
}

.searchbar {
  flex: 0 0 50px;
  margin-bottom: 20px;
  border: 1px solid black;
}

.section-content {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.sidebar {
  flex: 0 0 25%;
  border: 1px solid black;
}

.results-table {
  flex: 1;
  border: 1px solid black;
}

* {
  box-sizing: border-box;
}

<div class="menubar">menu bar</div>
<div class="main-section">main container
  <div class="searchbar">search bar</div>
  <div class="section-content">
    <div class="sidebar">side bar</div>
    <div class="results-table">results table</div>
  </div>
</div>

jsFiddle demo

来源：https://stackoverflow.com/questions/50498123/responsive-height-layout-with-dynamic-height-elements

标签

html

css

flexbox