Question

我追求以下功能：

“导航”列（左侧）保持锁定状态，并占据100vh或浏览器当前高度的100％，
“内容”列（右）滚动，显示内容。

现在，当缩小浏览器的尺寸时，下面的代码可以很好地工作：“内容”列顶部的“导航”列堆栈。

但是，我想保留此功能，同时强制固定“导航”列。

到目前为止，我已经尝试在position: fixed;的{{1}}下使用.nav-column，这导致导航与内容重叠。

我正在使用React 16.7.0和'react-flexbox-grid'。还检出了this，该解决方案仅涉及使用基本HTML / CSS，与React或React Flexbox Grid无关。

有帮助吗？这是代码：

（对不起，我无法运行该代码段。猜测是App.css的内容。）

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;

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

使用React / React Flexbox Grid的两列（一个固定，一个滚动）

1 个答案: