Question

我一直在尝试。我正在学习前端开发时，需要进行两天的垂直滚动。（我为此使用了React，请原谅我的语法）

我想用3个主要部分填充视口：

导航：应用的通用标头
左侧内容：大小固定，因此我可以通过编程方式滚动其内容
右侧内容：垂直滚动面板，其内容被行包装

但是问题是，每当右侧内容的高度由于行换行而增加时，<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')!);

行包装的弹性容器中的垂直滚动

0 个答案: