Html 为什么我的网页没有延伸到整个页面？_Html_Css_Flexbox

Html 为什么我的网页没有延伸到整个页面？

html css

Html 为什么我的网页没有延伸到整个页面？,html,css,flexbox,Html,Css,Flexbox,我希望页面延伸到整个网页，而不是离开底部空白，最大宽度为500px时，我希望它缩小尺寸，使其适合手机屏幕 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv

我希望页面延伸到整个网页，而不是离开底部空白，最大宽度为500px时，我希望它缩小尺寸，使其适合手机屏幕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing:border-box;
        }
    .container{
        display:flex;
        flex-direction: column;
        height:100%;

    }
    .item{
        padding:20px;
    }
    header{
        background-color: green;
    }
    h1{
        text-align: center;
    }
    main{
        background-color: yellow;
        display:flex;
        flex-direction:row;      
    }

    aside{

        flex-basis: 20%;
    }

    article{
        padding:20px;
        flex-basis:60%;    
    }

    footer{
        background-color: purple;
    }

    nav {
            background-color: #666;
            padding: 1em 0;
            width: 100%;
            flex-grow: 1;
            border-bottom: 3px solid navy;
        }

        .desktop ul {
            display: flex;
            flex-direction: row;
            justify-content: center;
            vertical-align: center;
            direction: rtl;
        }

        .desktop ul li {
            list-style-type: none;
            margin-left: 10px;
            border-left: 1px solid #000;
            padding-left: 1em;
        }

        .mobile ul li a:hover,
        .desktop ul li a:hover {
            color: navy;
        }

        .desktop ul li:last-child {
            border-left: none;
        }

        .mobile ul {
            list-style-type: none;
            line-height: 1.5;
            direction: rtl;
        }

        .mobile ul li {
            border-bottom: 1px solid #000;
            padding-bottom: 0.5em;
            padding-top: 0.5em;
        }

        .mobile ul li:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        ul li a {
            text-decoration: none;
            color: white;
        }

        footer {
            text-align: center;
            background-color: #666;
            color: #fff; 
            border-top: 3px solid navy;
        }

        .burger {
            display: none;
            cursor: pointer;
            font-size: 1.5em;
            position: absolute;
            right: 0.3em;
            top: 0.3em;
        }

        .mobile {
            display: none;
            color: #fff;
            margin-top: 10%;
            direction: rtl;
            position: absolute;
            top:0em;
            right: 0;
            width: 30%;
            padding: 1em;
        }

        .banner {
            width: 100%;
            height: 50px;
            margin-bottom: 1em;
            background-color: navy;
            color: #fff;
        }

        .leftBanners{
        background-color: brown;
    }

    .rightBanners{
        background-color: brown;
    }

        @media (max-width:500px) {
            nav .burger {
                display: block;
            }

            .desktop {
                display: none;
            }

            .burger:hover+.mobile {
                display: block;
                background-color: #666;
                color: blue;
            }

            .mobile:hover {
                display: block;
                background-color: #666;
            }

            article {
                width: 100%;
                padding: 1em;
                margin-top: 7em;
            }
            nav{
                height:50px;
            }

        }

    </style>

</head>
<body>
    <div class="container">
        <nav>

                <div class="desktop">
                    <ul>
                        <li><a href="#">לימודים</a></li>
                        <li><a href="#">עבודה</a></li>
                        <li><a href="#">בריאות ואסתטיקה</a></li>
                        <li><a href="#">שירותים נוספים</a></li>
                        <li><a href="#">יצירת קשר</a></li>
                    </ul>
                </div>
                <div class="burger">
                    <span class="icon">&#9776;</span>
                </div>
                <div class="mobile">
                    <ul>
                        <li><a href="#">לימודים</a></li>
                        <li><a href="#">עבודה</a></li>
                        <li><a href="#">בריאות ואסתטיקה</a></li>
                        <li><a href="#">שירותים נוספים</a></li>
                        <li><a href="#">יצירת קשר</a></li>
                    </ul>

                </div>
            </nav>


        <main class="item">
            <aside class="leftBanners">
                <div class="banner">left banner1</div>
                <div class="banner">left banner2</div>
                <div class="banner">left banner3</div>
            </aside>

            <article>
                    <header>
                            <h1>this is H1!</h1>
                        </header>
                        <br>
                <p>this is the article</p></article>
            <aside class="rightBanners">
                <div class="banner">right banner1</div>
                <div class="banner">right banner2</div>
                <div class="banner">right banner3</div>
            </aside>
        </main>
        <footer class="item">This is the footer!</footer>
    </div>
</body>
</html>

我希望页面延伸到整个网页，而不是离开底部空白，最大宽度为500px时，我希望它收缩，使其感觉到手机屏幕。

试试看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing:border-box;
        }
    .container{
        display:flex;
        flex-direction: column;
        height:100%;

    }
    .item{
        padding:20px;
    }
    header{
        background-color: green;
    }
    h1{
        text-align: center;
    }
    main{
        background-color: yellow;
        display:flex;
        flex-direction:row;      
    }

    aside{

        flex-basis: 20%;
    }

    article{
        padding:20px;
        flex-basis:60%;    
    }

    footer{
        background-color: purple;
    }

    nav {
            background-color: #666;
            padding: 1em 0;
            width: 100%;
            flex-grow: 1;
            border-bottom: 3px solid navy;
        }

        .desktop ul {
            display: flex;
            flex-direction: row;
            justify-content: center;
            vertical-align: center;
            direction: rtl;
        }

        .desktop ul li {
            list-style-type: none;
            margin-left: 10px;
            border-left: 1px solid #000;
            padding-left: 1em;
        }

        .mobile ul li a:hover,
        .desktop ul li a:hover {
            color: navy;
        }

        .desktop ul li:last-child {
            border-left: none;
        }

        .mobile ul {
            list-style-type: none;
            line-height: 1.5;
            direction: rtl;
        }

        .mobile ul li {
            border-bottom: 1px solid #000;
            padding-bottom: 0.5em;
            padding-top: 0.5em;
        }

        .mobile ul li:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        ul li a {
            text-decoration: none;
            color: white;
        }

        footer {
            text-align: center;
            background-color: #666;
            color: #fff; 
            border-top: 3px solid navy;
        }

        .burger {
            display: none;
            cursor: pointer;
            font-size: 1.5em;
            position: absolute;
            right: 0.3em;
            top: 0.3em;
        }

        .mobile {
            display: none;
            color: #fff;
            margin-top: 10%;
            direction: rtl;
            position: absolute;
            top:0em;
            right: 0;
            width: 30%;
            padding: 1em;
        }

        .banner {
            width: 100%;
            height: 50px;
            margin-bottom: 1em;
            background-color: navy;
            color: #fff;
        }

        .leftBanners{
        background-color: brown;
    }

    .rightBanners{
        background-color: brown;
    }

        @media (max-width:500px) {
            nav .burger {
                display: block;
            }

            .desktop {
                display: none;
            }

            .burger:hover+.mobile {
                display: block;
                background-color: #666;
                color: blue;
            }

            .mobile:hover {
                display: block;
                background-color: #666;
            }

            article {
                width: 100%;
                padding: 1em;
                margin-top: 7em;
            }
            nav{
                height:50px;
            }

        }

    </style>

</head>
<body>
    <div class="container">
        <nav>

                <div class="desktop">
                    <ul>
                        <li><a href="#">לימודים</a></li>
                        <li><a href="#">עבודה</a></li>
                        <li><a href="#">בריאות ואסתטיקה</a></li>
                        <li><a href="#">שירותים נוספים</a></li>
                        <li><a href="#">יצירת קשר</a></li>
                    </ul>
                </div>
                <div class="burger">
                    <span class="icon">&#9776;</span>
                </div>
                <div class="mobile">
                    <ul>
                        <li><a href="#">לימודים</a></li>
                        <li><a href="#">עבודה</a></li>
                        <li><a href="#">בריאות ואסתטיקה</a></li>
                        <li><a href="#">שירותים נוספים</a></li>
                        <li><a href="#">יצירת קשר</a></li>
                    </ul>

                </div>
            </nav>


        <main class="item">
            <aside class="leftBanners">
                <div class="banner">left banner1</div>
                <div class="banner">left banner2</div>
                <div class="banner">left banner3</div>
            </aside>

            <article>
                    <header>
                            <h1>this is H1!</h1>
                        </header>
                        <br>
                <p>this is the article</p></article>
            <aside class="rightBanners">
                <div class="banner">right banner1</div>
                <div class="banner">right banner2</div>
                <div class="banner">right banner3</div>
            </aside>
        </main>
        <footer class="item">This is the footer!</footer>
    </div>
</body>
</html>

高度：100vh

而不是

身高：100%

在你的容器上

你还应该阻止你的导航增长删除flex grow，否则它会一直增长到页面底部，除非你想这样做。

谢谢你的工作，我的main也是flex容器的孩子，所以我给了它flex grow:1，所有东西都很有魅力谢谢兄弟D Daniel Vafidis，100vh使魔术成为可能我添加了一条评论，但似乎我失败了，我想告诉你100%和100vh之间的区别是100%占据了内容的所有空间，VH以%表示视图高度：例如100vh=屏幕的100%；80%就是80%等等。