Я пытался.добиться вертикальной прокрутки за два дня, пока я изучаю разработку внешнего интерфейса.(и я использую React для этого, пожалуйста, прости мой синтаксис)
У меня есть 3 основные части, которыми я хочу заполнить свое окно просмотра:
Навигация: распространеннаязаголовок для приложения
Содержимое слева: что-то фиксированного размера, поэтому я могу программно прокручивать его содержимое
Содержимое справа: Aвертикально прокручивающаяся панель с содержимым, заключенным в строку
Но проблема в том, что всякий раз, когда высота правого содержимого увеличивается из-за переноса строки, <div id="right-side"> также увеличиваетсяв рост, несмотря на то, что я дал ему высоту 100% от его родителяЭто увеличение высоты также влияет на <div id="main-view"> и приводит не только к прокрутке всей страницы, но и к увеличению высоты <div id="left-side">, которая обрезает часть его содержимого.
Вот мой код, который не работает
<div id="app" style={{height: '100%', display: 'flex', flexFlow: 'column'}}>
<div id="navigation-bar" style={{height: '50px', backgroundColor: '#ddddff', display: 'flex', alignItems: 'center'}}>
Navigation
</div>
<div id="main-view" style={{flex: 1, display: 'flex', flexFlow: 'row wrap'}}>
<div id="left-side" style={{flex: 3, display: 'flex'}}>
<div id="should-not-expand" style={{flex: 1, backgroundColor: '#dddddd'}} />
</div>
<div id="right-side" style={{flex: 2, display: 'flex', height: '100%', maxHeight: '100%', minHeight: '100%'}}>
<div id="should-vertically-scroll" style={{flex: 1, backgroundColor: '#ffdddd', display: 'flex', flexFlow: 'column', overflowY: 'scroll'}}>
<div id="heading" style={{margin: '30px 30px 0 30px', backgroundColor: '#ddffdd'}}>
Header
</div>
<div id="expandable-height" style={{margin: '25px', display: 'flex', flexFlow: 'row wrap'}}>
<div style={{margin: '5px', height: '150px', width: '200px', backgroundColor: '#fff'}} />
<div style={{margin: '5px', height: '150px', width: '200px', backgroundColor: '#fff'}} />
<div style={{margin: '5px', height: '150px', width: '200px', backgroundColor: '#fff'}} />
<div style={{margin: '5px', height: '150px', width: '200px', backgroundColor: '#fff'}} />
<div style={{margin: '5px', height: '150px', width: '200px', backgroundColor: '#fff'}} />
<div style={{margin: '5px', height: '150px', width: '200px', backgroundColor: '#fff'}} />
<div style={{margin: '5px', height: '150px', width: '200px', backgroundColor: '#fff'}} />
<div style={{margin: '5px', height: '150px', width: '200px', backgroundColor: '#fff'}} />
<div style={{margin: '5px', height: '150px', width: '200px', backgroundColor: '#fff'}} />
<div style={{margin: '5px', height: '150px', width: '200px', backgroundColor: '#fff'}} />
</div>
</div>
</div>
</div>
</div>
То, что я пробовал
По какой-то причине я пытался дать <div id="expandable-height"> фиксированную высоту 0px,И это заставило свитки содержаться в правой части.Однако этот обходной путь казался плохим решением, поскольку я не смог бы разместить нижний колонтитул после <div id="expandable-height">, он просто перекрывался бы с содержимым, заключенным в строки.
Это был бы бесценный урок для изучениячто происходит, и что возможно, а что нет.Я очень ценю ваше время и внимание!Заранее спасибо!
РЕДАКТИРОВАТЬ
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
</head>
<body>
<div id="root" />
</body>
</html>
index.css
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#root {
height: 100%;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}
index.tsx
// imports
ReactDOM.render((
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
), document.getElementById('root')!);