Блог

Главная - Вопросы по программированию - Вертикальная прокрутка в гибком контейнере с оболочкой из строк

Вертикальная прокрутка в гибком контейнере с оболочкой из строк

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

Я пытался. добейтесь вертикальной прокрутки в течение двух дней, поскольку я изучаю разработку интерфейса. (и я использую для этого 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"> фиксированную высоту 0 пикселей. И это привело к тому, что прокрутки содержались в правой части. Однако этот обходной путь показался плохим решением, поскольку я не смог бы разместить нижний колонтитул после <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')!);

Комментарии:

1. Предоставьте полный HTML-код, включая ссылку на скрипт.

2. Flex работает там правильно — высота области просмотра будет меняться по мере вступления в силу переноса строк. Вы могли бы управлять поведением переноса, используя фиксированную ширину дочерних элементов flex, которые соответствуют точкам останова медиа-запроса. Например, каждый дочерний элемент flex имеет размер 500 пикселей, а затем, когда область просмотра достигает 500 пикселей, вы меняете ширину на 250 пикселей, чтобы дочерние элементы теперь складывались. Окно просмотра все равно будет меняться по высоте, но вы могли бы управлять этим более полно.

3. Также очень сложно использовать фиксированные высоты пикселей для родительских элементов именно по той причине, которую вы упомянули: когда что-то меняется, они автоматически переполняют свои контейнеры. HTML всегда пытается отобразить содержимое, поэтому вы можете скрыть это поведение, overflow-y: hidden; но это не идеально. Создавайте интерфейсы, позволяющие контенту создавать прокручиваемые контейнеры, когда это необходимо.

4. @JunPark — похоже, вам нужен очень статичный интерфейс, так что да, вам нужно немного переосмыслить. Ваш макет не обязательно неправильный, но вы не использовали position свойство, которое требуется, если вы хотите, чтобы все было position:fixed , как в левом столбце. Но довольно странно иметь два фиксированных столбца с прокруткой внутри каждого.

5. @JunPark — да, тогда сделайте все с position:fixed помощью, а затем создайте гибкие ящики внутри фиксированных контейнеров.

Метки: