使用React/网格的两列(一个固定，一个卷轴)

Question

我所追求的功能如下：

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

现在，当浏览器被缩小时，下面的代码工作得很好--在内容列的顶部，导航列堆栈。

但是，我希望在强制修复导航列时保留此功能。

到目前为止，我已经尝试在.nav-column下在App.css中使用App.css，这导致了导航与内容重叠。

我使用的是React 16.7.0和“react flexbox-grid”。此外，这个解决方案只涉及使用基本的this /CSS，与React无关，也不涉及Flexbox。

有什么帮助吗？下面是代码：

(对不起，我不能让片段运行。大概是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