javascript - 使用 React/React Flexbox Grid 的两列(一列固定，一列滚动)

Question

我追求以下功能:

• 导航栏(左)保持锁定状态并占据 100vh，即浏览器当前高度的 100%，
• 内容栏(右)滚动，显示内容。

现在，当浏览器尺寸缩小时，以下代码运行良好，导航列堆叠在内容列的顶部。

但是，我想在强制修复导航列的同时保留此功能。

到目前为止，我已经尝试在 App.css 的 .nav-column 下使用 position: fixed;，这导致了 Navigation重叠内容。

我正在使用 React 16.7.0 和“react-flexbox-grid”。勾选this同样，该解决方案仅涉及使用基本的 HTML/CSS，与 React 或 React Flexbox Grid 无关。

有什么帮助吗？这是代码:

(抱歉，我无法运行该代码段。我猜这是 react-flexbox-grid 的东西。)

import React, { Component } from 'react';
import { Grid, Row, Col } from 'react-flexbox-grid';
import './App.css';

class App extends Component {
  render() {
    return (
      <Grid fluid className='app-main'>

        <Row>
          <Col className='nav-column' xs={12} sm={3}>
            <h1>Nav</h1>
          </Col>

          <Col className='content-column' xs >
            <h1>Content</h1>
            <div>
            <p>
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            </p>
            </div>
          </Col>
        </Row>

      </Grid>
    );
  }
}

export default App;

.app-main {
  font-family: Helvetica;
}

.nav-column {
  font-family: Helvetica;
  font-size: 18px;
  background-color: aqua;
}

.content-column {
  font-size: 18px;
  background-color: darkkhaki;
}

Answer 1

我对您的设计有些冒昧，认为这就是您从描述中得到的结果。最大的变化是删除了 <Row>因为这会使仅滚动一列变得复杂，而其余的则使用 CSS 解决。

import React from "react";
import ReactDOM from "react-dom";
import { Grid, Row, Col } from "react-flexbox-grid";
import "./styles.css";

function App() {
  return (
    <Grid fluid className="app-main">
      <Col className="nav-column" xs={12} sm={3}>
        <h1>Nav</h1>
      </Col>

      <Col className="content-column" xs>
        <h1>Content</h1>
        <div>
          <p>
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum."
          </p>
        </div>
      </Col>
    </Grid>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CSS

.app-main {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.nav-column {
  font-family: Helvetica;
  font-size: 18px;
  background-color: aqua;
  overflow: hidden;
}

.content-column {
  font-size: 18px;
  background-color: darkkhaki;
  overflow: scroll;
}

该应用程序是作为函数编写的，以便更轻松地使用实时编辑器。所以它在实时编辑器中。

https://codesandbox.io/s/n4n779pj4m