将div拉伸到父级的高度答案

【问题标题】：Stretching div to height of parent将div拉伸到父级的高度
【发布时间】：2019-06-13 11:54:28
【问题描述】：

我知道这个问题的一些变化已经被问过很多次了。

但是，我似乎无法使用推荐的方法使其工作。

为什么flex: 1 似乎被忽略了？

目的是让红色容器填充其下方的可用空间。

代码沙盒链接here。

import React from "react";
import { render } from "react-dom";
import styled, { createGlobalStyle, ThemeProvider } from "styled-components";

const Style = createGlobalStyle`
  body, html {
    height: 100%;
    background: green;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
`;

const FlexCol = styled.div`
  display: flex;
  flex-direction: column;
`;

const Layout = ({ children }) => {
  return (
    <div>
      <Header>header</Header>
      <FlexCol>{children}</FlexCol>
    </div>
  );
};

const Header = styled.div`
  height: 50;
  background: blue;
`;

const Home = () => {
  return (
    <div>
      <Feed />
    </div>
  );
};

const FeedContainer = styled.div`
  display: flex;
  flex-direction: column;
  flex: 1;
  background: red;
`;

const Feed = () => <FeedContainer>something</FeedContainer>;

const App = () => {
  return (
    <Layout>
      <Home />
    </Layout>
  );
};

render(
  <ThemeProvider theme={{}}>
    <React.Fragment>
      <Style />
      <App />
    </React.Fragment>
  </ThemeProvider>,
  document.getElementById("root")
);

【问题讨论】：

你在第一个 div 上错过了height: 100%; ......好吧，他们中的很多人都失踪了，你只让身体成为 100%，而没有他们的孩子
你指的是哪个 div？如果您指的是布局，添加它似乎并没有改变它。
您只将 body 设置为 100% 而没有它的孩子。你有根 div，里面还有另一个 div
您介意编辑 CodeSandbox 示例以说明您的意思吗？
我不知道反应，所以我无法帮助你......我只是根据我看到的生成代码评论

标签： css reactjs styled-components

【解决方案1】：

您的设置中缺少的是主体和布局之间的中间容器的高度。渲染 React 应用的容器：#root。

在其上添加 100% 高度可以解决问题：

const Style = createGlobalStyle`
  body, html {
    height: 100%;
    background: green;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  #root { //<-- this thingie
    height: 100%;
  }
`;

这是一个更新的沙盒：https://codesandbox.io/s/xrw84wkw54

【讨论】：

原来是 React Router BrowserRouter 弄乱了我的样式的问题，但它与您的答案基本相同，因此我将其标记为正确。谢谢！对于未来的人：小心BrowserRouter 不会挤压你的风格。
您能否评论将height: 100%; 放在#root 标签上与将Layout div 设为height: 100vh 之间的区别？一个比另一个更可取吗？

【解决方案2】：

为了将来参考，这也可以通过设置Layout 的样式并在相关的地方使用flexGrow 来实现。

import React from "react";
import { render } from "react-dom";
import styled, { createGlobalStyle, ThemeProvider } from "styled-components";

const Style = createGlobalStyle`
  body, html {
    height: 100%;
    background: green;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
`;

const FlexCol = styled.div`
  display: flex;
  flex-direction: column;
  flex-grow: 1;
`;

const Layout = ({ children }) => {
  return (
    <div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
      <Header>header</Header>
      <FlexCol>{children}</FlexCol>
    </div>
  );
};

const Header = styled.div`
  height: 50;
  background: blue;
`;

const Home = () => {
  return (
    <div
      style={{
        height: "100%"
      }}
    >
      <Feed />
    </div>
  );
};

const FeedContainer = styled.div`
  display: flex;
  flex: 1;
  background: red;
  height: 100%;
  width: 100px;
`;

const Feed = () => <FeedContainer>something</FeedContainer>;

const App = () => {
  return (
    <Layout>
      <Home />
    </Layout>
  );
};

render(
  <ThemeProvider theme={{}}>
    <React.Fragment>
      <Style />
      <App />
    </React.Fragment>
  </ThemeProvider>,
  document.getElementById("root")
);

这给出了：

【讨论】：