React flexbox 溢出屏幕尺寸

Question

我试图让一个div渲染到屏幕/页面的底部（仅此而已）。

只要这个div是整个页面中唯一的东西，我就能成功地做到这一点。 然而，每当我在它上面有任何东西时，它就会溢出页面（在这个例子中，文本Some Header ）。

https://codesandbox.io/s/keen-bird-phx1f?file=/src/App.js

反应代码：

import "./styles.css";

import React, { Fragment } from "react";

export default function App(props) {
  return (
    <Fragment>
      <div>Some Header</div>
      <div className="test1">
        <div className="dashbar">Dash</div>
        <div className="other-content">Other</div>
      </div>
    </Fragment>
  );
}

CSS代码：

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}

.test1 {
  display: flex;
  height: 100vh;
  border: 10px solid green;
}

.dashbar {
  flex: 1 0 10%;
  background: dodgerblue;
}

.other-content {
  flex: 1 0 90%;
  background: papayawhip;
}

我怎样才能让这个div停在页面底部而不是像这样溢出？

如果我删除<div>Some Header</div> ，那么它会按预期运行：

Answer 1

.test1的高度为 100vh，这意味着您要强制它与视口完全一样高。 但它上面有一个标题！ 因此，标题必然会将其向下推并溢出屏幕。 你需要更多的 Flexbox 技巧才能让它正确，尤其是flex-grow:1 。

 * { box-sizing: border-box; } body { margin: 0; } #root { width: 100vw; height: 100vh; display: flex; flex-direction: column; } .test1 { display: flex; flex-grow: 1; border: 10px solid green; } .dashbar { flex: 1 0 10%; background: dodgerblue; } .other-content { flex: 1 0 90%; background: papayawhip; }

 <body> <div id="root"> <div> Some Header<br> with a couple<br> of lines in it </div> <div class="test1"> <div class="dashbar">Dash</div> <div class="other-content">Other</div> </div> </div> </body>

Answer 2

这是因为“test1”的高度为 100vh，并且有一个具有一定高度的静态标题文本。 试试这个来修复：

* {
  box-sizing: border-box;
  line-height: 15px;
}

.test1 {
  display: flex;
  height: calc(100vh - 15px);
  border: 10px solid green;
}

--- 动态解决方案： https : //codesandbox.io/s/stupefied-agnesi-x496f?file=/src/App.js

React flexbox 溢出屏幕尺寸

问题描述

2 个解决方案

解决方案1
2 2021-07-15 12:29:37

解决方案2
0 2021-07-15 12:26:40

React flexbox 溢出屏幕尺寸

问题描述

2 个解决方案

解决方案1 2 2021-07-15 12:29:37

解决方案2 0 2021-07-15 12:26:40

解决方案1
2 2021-07-15 12:29:37

解决方案2
0 2021-07-15 12:26:40