时间戳

首页 > 解决方案 > iPhone上的flexbox布局没有占用适量的空间

javascript - iPhone上的flexbox布局没有占用适量的空间

问题描述

我一直试图让这种布局适用于智能手机。我要做的是有一个不会移动的固定标题，然后在标题下方有一个 flex 容器，它占据了屏幕空间的其余部分。flex 容器内部应该有 3 个大小相同的部分，每个部分占用 flex-container 的大小。

我目前的尝试不起作用。我不知道如何防止固定标题移动，我不知道如何使弹性容器的每个部分都具有正确的大小。

<!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>

标签： javascriptcssiosprogressive-web-apps

解决方案

如果将位置设置为fixed或absolute，则元素的位置必须是确定的。您必须另外将导航栏的宽度设置为 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>

推荐阅读