макет flexbox на iphone не занимает нужное количество места - PullRequest
Новая
       16

макет flexbox на iphone не занимает нужное количество места

0 голосов
/ 26 апреля 2020

Я пытался заставить этот макет работать на смартфонах. То, что я хочу сделать, это иметь фиксированный заголовок, который не двигается, а затем иметь гибкий контейнер под заголовком, который занимает остальное пространство экрана. Внутри флекс-контейнера должно быть 3 секции одного размера, каждый из которых принимает размер флекс-контейнера.

Моя текущая попытка не работает. Я не могу понять, как удерживать фиксированный заголовок от перемещения, и я не могу понять, как получить гибкий контейнер нужного размера с каждым из разделов. 

<!DOCTYPE html>
<html>
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <title>scroll</title>
        <style>
            html{
                margin:0;
                padding:0;
                height:100%;
            }
            body{
                margin:0;
                padding:0;
                height:100%;
            }
            #container{
                height:100%;
                overflow:scroll;
            }
            #fixed{
                postion:fixed;
                top:0;
                height:20%;
                background-color:lightblue;
            }
            #flex-container{
                display:flex;
                flex-direction:column;
                justify-content:space-around;
                height:80%;
            }
            .sections{
                height:80%;
            }
            #section1,#section3{
                background-color:blue;
            }
            
            
        </style>
    </head>
    <body>
        <div id='container'>
            <div id='fixed'>
                
            </div>
            <div id='flex-container'>
                <div id='section1' class='sections'>
                    
                </div>
                <div id='section2' class='sections'>
                    
                </div>
                <div id='section3' class='sections'>
                    
                </div>
            </div>
        </div>
    </body>
</html>

1 Ответ

0 голосов
/ 26 апреля 2020

Если вы установите положение фиксированный или абсолютный , положение элемента должно быть определенным. Вы должны либо дополнительно установить width панели навигации на 100%, либо добавить оба свойства left: 0 и right: 0 . Кроме того, не устанавливайте для каждой секции значение height: 80% , а только гибкий контейнер. Убедитесь, что у каждого элемента flex есть свойство flex: 1 .

Теперь ваш код должен выглядеть следующим образом: 

<!DOCTYPE html>
<html>
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <title>scroll</title>
        <style>
            html{
                margin:0;
                padding:0;
                height:100%;
            }
            body{
                margin:0;
                padding:0;
                height:100%;
            }
            #container{
                height:100%;
                overflow:scroll;
            }
            #fixed{
                postion:fixed;
                top:0;
                height:20%;
                width: 100%;
                background-color:lightblue;
            }
            #flex-container{
                display:flex;
                flex-direction:column;
                justify-content:space-around;
                height:80%;
            }
            .sections{
                flex: 1;
            }
            #section1,#section3{
                background-color:blue;
            }
            
            
        </style>
    </head>
    <body>
        <div id='container'>
            <div id='fixed'>
                
            </div>
            <div id='flex-container'>
                <div id='section1' class='sections'>
                    
                </div>
                <div id='section2' class='sections'>
                    
                </div>
                <div id='section3' class='sections'>
                    
                </div>
            </div>
        </div>
    </body>
</html>
...