Question

所以我正在建立一个课程的网站，并且我对css有一个意想不到的问题。如果尺寸较小，则身体似乎会扩展到视口之外。将主体宽度设置为100vw和100%且没有任何变化，我看不出为什么会发生这种情况？

您可能必须将代码段复制粘贴到代码笔中。堆栈不允许我链接到Codepen：（

无论如何，您可以告诉我进行修复的任何事情都会有所帮助！

body{
    
    width:100vw;
    margin:0;
    padding:0;

        
}
.page-wrapper{
    width:100%;
    height:100%;

    display: grid;
    grid-template-columns: 0.5fr repeat(3, 2fr) 0.5fr;
    grid-template-rows: auto 0em repeat(2, auto);
    grid-template-areas: "header header header header header"
                         ". . . . ."
                         ". main main main ."
                         "footer footer footer footer footer";
}

.header{
    display:flex;
    position:relative;

    align-items: center;

    flex-direction:column;



    height:80vh;
    grid-area: header;

    color:white
}

.navbar{ 
    display: flex;
    
    margin-top:8%;

    width:70%;
    
    
    justify-content: center;
}


.nav-item{
    font-size: 2rem;
    margin: 0em 0.2em;
}

.dot{
    margin-right: 0.15em;
}
.dot.first, .dot.last{
    
}


.title-welcome{
    margin-top:1.5em;
    padding:0 1em;
    font-size:3rem;
    text-align: center;
}



.header_video-wrapper{
    grid-area: header;
    
    height:100%;
    width:100%;
    overflow:none;
}

.header_video-overlay{
   opacity:0.4;
   position:absolute;
   width:100%;
   height:100%; 
}

.header_video{
    position:absolute;
}


.main_content{
    grid-area: main;
    height:auto;

    /* adds a break between sections */
    padding-top:2em;
}
.footer{
    height:4rem;
    grid-area:footer;
}

/*placeholder classes are just for grid demonstration*/
.placeholder{
    width:100%;
    background-color: grey;
}


@media screen and (min-width:768px){
    

    .page_container{

        grid-template-columns: 0.5fr repeat(3, 2fr) 0.5fr;
        grid-template-rows: repeat(3, auto) 14rem;
        grid-template-areas:"header header header header header header header header"
                            ". carousel carousel carousel carousel carousel carousel ."
                            ". main main main main main main ."
                            "footer footer footer footer footer footer footer footer";

    }


    .header{
        height: 45vh
    }

    .navbar{
    
    }

    .nav-item{
            
    }

    .dot.first, .dot.last{
        /* display:none; */
    }

    .main_content{

    }

    .footer{

    }
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Truro Multicultural Festival</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
    <link rel="stylesheet" href="styles-index.css" type="text/css" type="text/css" />
</head>

<body>
    <div class="page-wrapper">
        <div class="header">
            <nav class="navbar">
                <div class="nav-item">
                    <div>
                        <span class="dot first">•</span>
                        <a href="" class="page_link">Home</a>
                    </div>
                </div>
                <div class="nav-item">
                    <div>
                        <span class="dot">•</span>
                        <a href="/about" class="page_link">About</a>
                    </div>
                </div>
                <div class="nav-item">
                    <div>
                        <span class="dot">•</span>
                        <a href="/events" class="page_link">Events</a>
                    </div>
                </div>
                <div class="nav-item">
                    <div>
                        <span class="dot">•</span>
                        <a href="/contact" class="page_link">Contact</a>
                        <span class="dot last">•</span>
                    </div>
                </div>
            </nav>
            <h1 class="title-welcome">
                Welcome To The Truro Multicultural Festival
            </h1>
        </div>
        <div class="header_video-wrapper" preload="none">
            <div class="header_video-overlay"></div>
            <video class="header_video" src="media/header-video.webm"></video>
        </div>


        <main class="main_content placeholder"></main>
        <footer class="footer placeholder"></footer>
    </div>
</body>

</html>

Answer 1

内容（四个链接的文本）不会分成新行：当它们全部排成一行时，它们肯定相当宽，并且HTML内容的宽度比浏览器窗口的宽度还要宽。

要么让内容适合（较小的文本），以更小的宽度包装内容（媒体查询），要么通过添加溢出：隐藏到.page-wrapper（或.header）中来隐藏溢出内容。

Answer 2

您应该查看overflow:的css属性，以更改文本的环绕方式，不环绕的文字会导致元素扩展得比预期的大。

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

HTML主体溢出的未知原因

2 个答案: