Question

请考虑这种风格：

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.header {
  width: 100%;
  background-color: red;
  display: flex;
  height: 100px;
  justify-content: space-between;
  .logo-pane {
    width: 100px;
    height: 100px;
    background-color: green;
  }
  .user-actions {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
}

.content {
  flex-grow: 1;
  background-color: pink;
}

我想要实现的是content元素将采用视口的剩余高度，但它只需要他的内容高度。

HTML ：

<div class="root">
  <div class="header">
    <div class="logo-pane">Logo</div>
    <div class="user-actions">User Actions</div>
  </div>
  <div class="content">
    content
  </div>
</div>

Codepen

Answer 1

问题在于周围.root。您必须将.root的高度增加到剩余空间。因此，您必须在height:100vh;上设置.root。尝试以下解决方案：

body, html {
  margin:0;
  padding:0;
}
.root {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items:stretch;
  align-content:stretch;
}
.header {
  width: 100%;
  background-color: red;
  display: flex;
  height: 100px;
  justify-content: space-between;
}
.logo-pane {
  width: 100px;
  height: 100px;
  background-color: green;
}
.user-actions {
  width: 100px;
  height: 100px;
  background-color: blue;
}
.content {
  flex-grow:1;
  background-color: pink;
}

<div class="root">
  <div class="header">
    <div class="logo-pane">Logo</div>
    <div class="user-actions">User Actions</div>
  </div>
  <div class="content">content</div>
</div>

Answer 2

将:root设置为100vh（视口高度的100％），而不是100%

Answer 3

.content {
  flex-grow: 1;
  background-color: pink;
  height: 100vh;
}

Answer 4

您只需添加

即可

height: 100%至html, body
为根div

20%

为内容div添加80%的高度

将解决您的问题

html,body {
  height: 100%;
}

以下是jsFiddle

希望有所帮助：）

Answer 5

我认为你误解了flex的作用。 Flex用于对齐其子项，而不是填充视口。这是另一种解决方案。

https://jsfiddle.net/rob_primacy/1wnpr50s/

<div class="root">
 <div class="header">
  <div class="logo-pane">Logo</div>
  <div class="user-actions">User Actions</div>
</div>
</div>
  <div class="content">
    content
  </div>

和css

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.header {
  width: 100%;
  background-color: red;
  display: flex;
  height: 100px;
  justify-content: space-between;
  position: relative;
 }
.user-actions {
  width: 100px;
  height: 100px;
  background-color: blue;
}
.logo-pane {
  width: 100px;
  height: 100px;
  background-color: green;
}

.content {
  background-color: pink;
  position: absolute;
  height: 100%;
 left: 8px;
 right: 8px;
}

Answer 6

像这样使用

＆＃13;

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>

<style type="text/css">
body{
margin:0;
}
.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.header {
  width: 100%;
  background-color: red;
  display: flex;
  height: 100px;
  justify-content: space-between;
  .logo-pane {
    width: 100px;
    height: 100px;
    background-color: green;
  }
  .user-actions {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
}

.content {
  flex-grow: 1;
  background-color: pink;
  height:100%;
  width:100%;
  position: fixed;
}

</style>
</head>

<body>
<div class="root">
  <div class="header">
    <div class="logo-pane">Logo</div>
    <div class="user-actions">User Actions</div>
  </div>
  <div class="content">
    content
  </div>
</div>
</body>

 </html>

＆＃13;

Answer 7

您的codepen链接正常。我不明白你被困在哪里。

您可以从2个容器中基本构建模板：header和main的示例

＆＃13;

html,
body {
  height: 100%;/* or just : 100vh; for body only */
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  /* width and margin:auto is avalaible */
}
header {
  /*  height: 50px;or do not set any and let grow from its content */
  background: gray;
}

main {
  flex: 1;/* will fill up all space left */
  background: lightblue;
  /* overflow:auto; optionnal if you do not want html to scroll and keep header fixed */
}

＆＃13;

  <header>
    whatever <br/> sizes me
  </header>
  <main> 
    content
  </main>

＆＃13;

从简单开始：）

要获取视口剩余高度的元素

7 个答案: