时间戳

首页 > 解决方案 > 具有动态高度元素的响应式高度布局

html - 具有动态高度元素的响应式高度布局

问题描述

我正在尝试使用菜单栏和包含搜索栏、左侧边栏和结果表的主容器构建布局。

我希望主容器始终尽可能高，以便窗口和左侧边栏和结果表在主容器内也尽可能高。

这就是在所有东西上固定高度时的样子：

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;
}

菜单栏的高度可以随着在不同设备上查看页面而改变，搜索栏的高度也可以随着搜索词的填充而改变。

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

标签： htmlcssflexbox

解决方案

只需使用 flex 属性即可：

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 演示

推荐阅读