动态高度元素的自适应高度布局 [英] 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.

用CSS构建这种响应式布局的正确方法是什么?

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

推荐答案

只需完全使用flex属性即可:

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>

这篇关于动态高度元素的自适应高度布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！