我有一個名為 Timeline 的部分，它溢位到我的 React 網站中另一個名為 Contact 的部分中。
我該怎么做才能讓 Timeline 的所有內容都顯示出來，但又不會溢位到另一個部分？
編輯：淺藍色部分是聯系部分開始的地方
編輯：
import React from 'react'
import './app.scss';
import Navbar from "./components/navbar/Navbar"
import Intro from "./components/intro/Intro"
import Menu from "./components/menu/Menu"
import Timeline from './components/timeline/Timeline';
import Contact from "./components/contact/Contact"
import { useState } from "react"
App.jsx
function App() {
const [menuOpen, setMenuOpen] = useState(false)
return (
<div className="app">
<Navbar menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
<Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
<div className="sections">
<Intro/>
<Timeline/>
<Contact/>
</div>
</div>
);
}
應用程式.scss
.app {
height: 100vh;
.sections {
width: 100%;
height: calc(100vh - 70px);
// background-color: #1F1D36;
position: relative;
top: 70px;
scroll-behavior: smooth;
display: flex;
scroll-snap-type: y mandatory;
scrollbar-width: none; // for firefox
&::-webkit-scrollbar{
display: none;
}
> * {
width: 100vw;
height: calc(100vh - 70px);
scroll-snap-align: start;
}
}
}
uj5u.com熱心網友回復：
添加max-height到.sections包含時間線并添加overflow-y:auto.
這會阻止該部分額外擴展并使內容滾動。
這是您可以參考的代碼。
*{
padding:0;
margin:0;
box-sizing: border-box;
}
.child{
height: calc(100vh - 70px);
}
.child:first-child{
background: yellow;
max-height: calc(100vh - 70px);
overflow-y:auto;
}
.child:last-child{
background: lightblue;
}
.large{
height: 900px;
background: white;
margin: 2rem;
}<html>
<body>
<div id="parent">
<div class="child">
<div class="large"></div>
</div>
<div class="child"></div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/369756.html
標籤：javascript 反应 前端