如何在反应中设置侧边栏和内容高度？

Question

我正在使用 reactJs 制作一个简单的网页。它仍然没有功能，但在我想要设计和架构它之前。我在设计它时遇到问题。目前它看起来像这样https://ibb.co/4TCRwTY，但是当我向下滚动时它看起来像这样https://ibb.co/kJC3p9q 我如何使它如此侧边栏和内容行并排并且它们不重叠页眉/页脚。此外，当向下滚动时，我希望侧边栏一直滚动到其内容的内容。我知道颜色看起来很荒谬，但它们是为了在视觉上区分组件。 对于这个简单的网页，常规 HTML/CSS（如 flexbox）是更好的选择，还是我应该考虑使用纯 reactjs 组件？ 任何帮助将不胜感激。谢谢

App.css

html, body {
    width: 100%;
    height: 100%;
    background: orange;
}
.sidenav { 
    float:left; 
    width:20%; 
    height: 100vh;
    background:darkslategray; 
    overflow-x: hidden; 
    padding-top: 60px;  
}
.sidenav p {
  padding-left: 45px;
  text-decoration: none;
  font-size: 20px;
  color: white;
}
.sidenav p:hover {
  color: blue;
}

.contents {
  height: 100vh;
  /* float:left; */
  padding: 60px 10px 60px 30px;
  background: gray; 
  align-items:center;
}

img {
    width: 800px;
    height: 1000px;
    margin-left: 80px;
  } 
header {
    position:fixed;
    width:100%;
    top:0px;
    background:darkslateblue;
    text-align: end;
    padding: 10px 20px 10px 0px;
    /* margin-bottom: 0!important; */
  }

footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    background: darkslateblue;
    text-align: end;
    padding: 10px 20px 10px 0px;
}

h3 {
  text-align: center; 
  font-size: 1.4em; 
  margin: 0px auto; 
  padding: 0px 0px 5px 0px; 
}

App.js

class App extends Component {
  constructor() {
    super();
  }
  render() {
    return (
      <>
        <Header/>
        <Sidebar/>
        <Footer/>
      </>
    );
  }
}
export default App;

Sidebar.jsx

const Sidebar = () => {
    return (
    <Router>
        <div className="sidenav">
            <Link to="/"><p>First Blog</p></Link>
            <Link to="/"><p>First Blog</p></Link>
            <Link to="/"><p>First Blog</p></Link>
            <Link to="/"><p>First Blog</p></Link>
            <Link to="/"><p>First Blog</p></Link>
            <Link to="/"><p>First Blog</p></Link>
        </div> 
        <div className="contents">
        <Switch>
            <Route exact path="/">
                <BlogContents/>
            </Route>
        </Switch>
        </div>
    </Router>
    );
  }

博客内容.jsx

function BlogContents() {
    return (
        <>
            <h3>My Recent Trip</h3>
            <p>blablaa
                janjnkjadn
                nacndcjds
                j cjdcscsdc
                rfcscndcvnsj
                amns am dasd
                s cweurbfskjdncsknjc!jknckjnvkerjnvejvnernvernvfjnv,
                fv mc mdf cdf fd nd csdc dewd wedwedwedew aknxjanc
            </p>
            <img src="https://images.unsplash.com/photo-1560214482-85e7339701c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=902&q=80"/>
        </>
    );
  }

页脚.jsx

function Footer() {
    return (
    <footer>
        This is Footer
    </footer>
    );
  }

Header.jsx

function Header() {
    return (
        <header> Home | Contact </header>
    );
  }

Answer 1

Flexbox 非常适合您的网站，在我看来是最适合的。如果可能，我也会避免使用100vh 来表示您的身高。这会将高度设置为加载时屏幕的视图高度，而不是整个页面的高度（如果它可以滚动超出屏幕高度）。

如果您希望侧边栏占据页面的整个高度，您可以将其设置为window.outerHeight。示例如下：

const Sidebar = () => {
// Variable to get window view height
const viewHeight = window.outerHeight;
return (
<Router>
    // added the style to the div, the .sidenav style will still work from your app.css sheet as well
    <div style={{ height: viewHeight }} className="sidenav">
        <Link to="/"><p>First Blog</p></Link>
        <Link to="/"><p>First Blog</p></Link>
        <Link to="/"><p>First Blog</p></Link>
        <Link to="/"><p>First Blog</p></Link>
        <Link to="/"><p>First Blog</p></Link>
        <Link to="/"><p>First Blog</p></Link>
    </div> 
    <div className="contents">
    <Switch>
        <Route exact path="/">
            <BlogContents/>
        </Route>
    </Switch>
    </div>
</Router>
)};

对于您的img，您会希望它的宽度为 %，因此它将针对不同的屏幕尺寸进行调整。您只需要给img 一个宽度，高度将根据图像的纵横比自动创建。我还会设置一个max-width 来控制图像不占据更大屏幕上的屏幕。为您的img 尝试以下代码：

img {
  width: 50%;
  max-width: 400px;
  margin-left: 80px;
}