React项目页面无法滚动问题求助

问题根源：你把书籍列表的.grid容器放在了固定定位（position: fixed）的.navbar内部。.navbar设置了固定高度70px，超出的内容会被容器截断；而且固定定位元素脱离文档流，不会触发页面或父容器的滚动行为。

修复步骤： #

1. 调整JSX结构：将.grid从.navbar中移出，放到.home容器下，与.navbar同级：

import BookComp from "./BookComp.jsx";
import { useState, useEffect } from "react";
import "./css/App.css";
import { getBook } from "./Api.js";

function App() {
  const [books, setbooks] = useState([]);
  const [click, setClick] = useState(0);
  const [searchFetch, setSearchFetch] = useState({});
  useEffect(() => {
    getBook(searchFetch).then((result) => {
      setbooks(result);
    });
  }, [click]);
  return (
    <div className="home">
      <div className="navbar">
        <input
          className="inputfield"
          type="text"
          value={searchFetch.text || ""}
          onChange={(e) => {
            setSearchFetch({ text: e.target.value });
          }}
        />
        <button
          className="searchButton"
          onClick={(e) => setClick((c) => c + 1)}
        >
          asdad
        </button>
      </div>
      {/* 将grid移到navbar外部 */}
      <div className="grid">
        {books.map((bok) => (
          <BookComp book={bok} key={bok.id} />
        ))}
      </div>
    </div>
  );
}

export default App;

2. 调整CSS样式：给.home添加上内边距，避免内容被固定导航栏遮挡，同时移除.grid中多余的margin-top：

/* 修改App.css中的.home和.grid样式 */
.home {
  box-sizing: border-box;
  padding-top: 70px; /* 高度与navbar一致，避免内容被遮挡 */
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 每行显示2个元素 */
  gap: 1.5rem;
  padding: 1rem;
  width: 100%;
  box-sizing: border-box;
  /* 移除原来的margin-top: 70px */
}

补充说明： #

之前你尝试给.home设置150vh高度后出现滚动条但无法滚动，是因为实际内容（.grid）被限制在固定高度的.navbar内部，页面滚动条属于.home，但.home内部除了固定定位的.navbar外没有其他可滚动内容，所以滚动无效。

内容的提问来源于stack exchange，提问作者Максим Циганський