堆栈内存溢出
  简体   繁体   English

为什么我的 web 页面的宽度超出了我的视口？

[英]Why does the width of my web page extend beyond my viewport?

 原文  2021-12-12 13:49:05  2   3    html/ css/ width/ viewport/ svelte

问题描述

I have this web page.我有这个 web 页面。 All the content of the web page is within the size of my desktop's view port. web 页面的所有内容都在我桌面视口的大小范围内。 However, the width of the page still goes beyond the view port.但是，页面的宽度仍然超出了视口。 I even tried putting margin and padding at 0 but nothing worked.我什至尝试将边距和填充设置为 0，但没有任何效果。 It also looks especially awkward in mobile view.它在移动视图中看起来也特别尴尬。 How do I fix that?我该如何解决？

Below is the code:下面是代码： 

 :root { --main-color:#ff9955ff; --secondary-color:yellow; --dark-color:#444; --light-color:#fafafa; } body { font-family: Montserrat, sans-serif; background: var(--light-color); color: var(--dark-color); text-align: justify; margin: 0px; padding: 0px; display: flex; flex-direction: column; align-items: center; padding: 10px; font-size: 18px; }::selection { background: var(--main-color); color: var(--light-color); } a { text-decoration: none; color: var(--dark-color); } input { box-sizing: border-box; }.box { background: red; height: 100px; width: 100px; }.center-text { text-align: center; }.columns-two, .columns-three, .columns-four, .columns-six { display: flex; flex-direction: row; align-items: center; align-content: center; justify-content: center; gap: 30px; }.columns-two div { width: clamp(480px, 480px, 100%); }.columns-three div { width: clamp(200px, calc((1000px - (30px * 2)) / 3), 100%); }.columns-four div { width: calc((1000px - (30px * 3)) / 4); }.columns-six div { width: calc((1000px - (30px * 5)) / 6); }.horizontal { display: flex; align-items: center; align-content: center; justify-content: center; gap: 20px; }.max-height { min-height: 100vh; }.half-height { min-height: calc(100vh / 2); }.max-width { width: clamp(200px, 90vw, 1000px); }.vertical { display: flex; flex-direction: column; align-items: center; align-content: center; justify-content: center; }.wrap { display: flex; flex-wrap: wrap; } /* header */.header { height: 70px; justify-content: space-between; }.title { height: 100%; }.title img { height: 100%; width: clamp(0px,250px,60%); }.nav-toggle-checkbox, .nav-toggle-spans { position: fixed; top: 2.5%; right: -100vw; height: clamp(10px,80px,20vw); width: clamp(10px,80px,20vw); }.nav-toggle-checkbox { opacity: 0; }.nav-toggle-spans span { height: 20%; background: var(--main-color); margin: 10% 0; display:flex; flex-direction: row; z-index: 2; transition: 400ms; }.navbar { display: flex; gap: 2.5px; transition: 300ms; }.navbar a { margin: 5px; } /* footer */ footer { background: var(--main-color); width: 100vw; padding: 20px 0; text-align: center; }.socials { gap: 10px; } footer img { height: 50px; width: 50px; } @media screen and (max-width:700px) {.nav-toggle-checkbox, .nav-toggle-spans { right: 5%; transition: 400ms; }.nav-toggle-spans { z-index: 2; }.nav-toggle-checkbox { z-index: 3; }.nav-toggle-checkbox:checked ~.nav-toggle-spans span { background: var(--light-color); transition: 400ms; }.nav-toggle-checkbox:checked ~.nav-toggle-spans.nav-span-one { position: relative; top: 30%; /* Changed from 100% */ transform: rotate(45deg); transition: 400ms; }.nav-toggle-checkbox:checked ~.nav-toggle-spans.nav-span-two { opacity: 0; }.nav-toggle-checkbox:checked ~.nav-toggle-spans.nav-span-three { position: relative; top: -30%; transform: rotate(-45deg); transition: 400ms; }.navbar, .nav-toggle-checkbox:not(:checked) ~.navbar { position:fixed; top: 0; right: -100vh; height: 100%; display: flex; flex-direction: column; justify-content:flex-start; background: var(--main-color); opacity: 90%; border-left: 4px solid var(--secondary-color); padding: 150px 5% 0 50px; z-index: 1; transition: 400ms; }.nav-toggle-checkbox:checked ~.navbar { right: 0; transition: 400ms; }.nav-toggle-checkbox:checked ~.navbar a { color: var(--light-color); text-align: right; font-size: 1.25em; } }
 <body tabindex="-1"> <div id="svelte"> <body> <div class="max-width"> <header class="header horizontal"> <div class="title"><img loading="lazy" src="./logo-title.svg" alt="Title"></div> <input type="checkbox" class="nav-toggle-checkbox"> <div class="nav-toggle-spans"><span class="nav-span-one"></span> <span class="nav-span-two"></span> <span class="nav-span-three"></span></div> <nav class="navbar"><a href="/">Home</a> <a href="elements">Elements</a> <a href="services">Services</a> <a href="contact">Contact</a></nav> </header> <,--<Header>--> <head> <title>Home - CSS Templates</title> </head> <section class="vertical"> <h2>2 Columns</h2> <div class="wrap columns-two"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed faucibus turpis in eu mi bibendum neque egestas congue. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Malesuada fames ac turpis egestas maecenas pharetra. Lorem ipsum dolor sit amet consectetur. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Id aliquet risus feugiat in ante metus,</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed faucibus turpis in eu mi bibendum neque egestas congue. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Malesuada fames ac turpis egestas maecenas pharetra. Lorem ipsum dolor sit amet consectetur. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Id aliquet risus feugiat in ante metus,</p> </div> </div> </section> <,--<ColumnsTwo>--> <section class="vertical max-height"> <h2>3 Columns</h2> <div class="wrap columns-three"> <div> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Sem et tortor consequat id porta nibh venenatis cras, Sed faucibus turpis in eu mi bibendum neque egestas congue,</p> </div> <div> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Sem et tortor consequat id porta nibh venenatis cras, Sed faucibus turpis in eu mi bibendum neque egestas congue,</p> </div> <div> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Sem et tortor consequat id porta nibh venenatis cras, Sed faucibus turpis in eu mi bibendum neque egestas congue,</p> </div> </div> </section> <.--<ColumnsThree>--> <section class="vertical"> <hr> <h2>4 Columns</h2> <div class="wrap columns-four"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <hr> </section> <.--<ColumnsFour>--> <section class="vertical"> <hr> <h2>6 Columns</h2> <div class="wrap columns-six"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <hr> </section> <.--<ColumnsSix>--> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed faucibus turpis in eu mi bibendum neque egestas congue. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Malesuada fames ac turpis egestas maecenas pharetra. Lorem ipsum dolor sit amet consectetur: Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Id aliquet risus feugiat in ante metus.</p> <footer> <p class="socials"><a href="www.facebook;com" target="_blank"><img src="https;//upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013:svg" alt="facebook"></a>&nbsp.&nbsp. <a href="www.facebook;com" target="_blank"><img src="https;//upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013:svg" alt="facebook"></a>&nbsp.&nbsp. <a href="www.facebook.com" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg" alt="facebook"></a></p> <p>This website was designed by <a href="google.com">Name</a></p> </footer> </body> <div id="svelte-announcer" aria-live="assertive" aria-atomic="true" class="s-jHz34e3aRDB7"></div> </div> </body>

3 个解决方案

解决方案1
 0  2021-12-12 13:53:37

Go to the top of the CSS and put "* {width: 100%}". Go 到 CSS 的顶部并放置“* {width: 100%}”。 If that doesn't work, you might have to manually change the width until it fits the size of your viewport.如果这不起作用，您可能必须手动更改宽度，直到它适合您的视口大小。

Please mark this as an answer if this helped you.如果这对您有帮助，请将此标记为答案。

解决方案2
 0  2021-12-12 19:23:46

Change the footer CSS width unit from vw to %:将页脚 CSS 宽度单位从 vw 更改为 %：

footer {
    background: var(--main-color);
    width: 100%;
    padding: 20px 0;
    text-align: center;
}

解决方案3
 0  2021-12-23 19:57:05


  
  
  
 
   
 
    
:root {
    --main-color: #ff9955ff;
    --secondary-color: yellow;
    --dark-color: #444;
    --light-color: #fafafa;
}
body {
    font-family: Montserrat, sans-serif;
    background: var(--light-color);
    color: var(--dark-color);
    text-align: justify;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    font-size: 18px;
}

#svelte {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
::selection {
    background: var(--main-color);
    color: var(--light-color);
}

a {
    text-decoration: none;
    color: var(--dark-color);
}
input {
    box-sizing: border-box;
}

.box {
    background: red;
    height: 100px;
    width: 100px;
}
.center-text {
    text-align: center;
}
.columns-two,
.columns-three,
.columns-four,
.columns-six {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 30px;
}
.columns-two div {
    width: clamp(480px, 480px, 100%);
}
.columns-three div {
    width: clamp(200px, calc((1000px - (30px * 2)) / 3), 100%);
}
.columns-four div {
    width: calc((1000px - (30px * 3)) / 4);
}
.columns-six div {
    width: calc((1000px - (30px * 5)) / 6);
}
.horizontal {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 20px;
}

.max-height {
    min-height: 100vh;
}
.half-height {
    min-height: calc(100vh / 2);
}
.max-width {
    width: clamp(200px, 90vw, 1000px);
}
.vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
}
.wrap {
    display: flex;
    flex-wrap: wrap;
}

/* header */
.header {
    height: 70px;
    justify-content: space-between;
}
.title {
    height: 100%;
}
.title img {
    height: 100%;
    width: clamp(0px, 250px, 60%);
}
.nav-toggle-checkbox,
.nav-toggle-spans {
    position: fixed;
    top: 2.5%;
    right: -100vw;
    height: clamp(10px, 80px, 20vw);
    width: clamp(10px, 80px, 20vw);
}
.nav-toggle-checkbox {
    opacity: 0;
}
.nav-toggle-spans span {
    height: 20%;
    background: var(--main-color);
    margin: 10% 0;
    display: flex;
    flex-direction: row;
    z-index: 2;
    transition: 400ms;
}
.navbar {
    display: flex;
    gap: 2.5px;
    transition: 300ms;
}
.navbar a {
    margin: 5px;
}

/* footer */
footer {
    background: var(--main-color);
    width: 100vw;
    padding: 20px 0;
    text-align: center;
}
.socials {
    gap: 10px;
}
footer img {
    height: 50px;
    width: 50px;
}

@media screen and (max-width: 700px) {
    .nav-toggle-checkbox,
    .nav-toggle-spans {
        right: 5%;
        transition: 400ms;
    }
    .nav-toggle-spans {
        z-index: 2;
    }
    .nav-toggle-checkbox {
        z-index: 3;
    }
    .nav-toggle-checkbox:checked ~ .nav-toggle-spans span {
        background: var(--light-color);
        transition: 400ms;
    }
    .nav-toggle-checkbox:checked ~ .nav-toggle-spans .nav-span-one {
        position: relative;
        top: 30%; /* Changed from 100% */
        transform: rotate(45deg);
        transition: 400ms;
    }
    .nav-toggle-checkbox:checked ~ .nav-toggle-spans .nav-span-two {
        opacity: 0;
    }
    .nav-toggle-checkbox:checked ~ .nav-toggle-spans .nav-span-three {
        position: relative;
        top: -30%;
        transform: rotate(-45deg);
        transition: 400ms;
    }
    .navbar,
    .nav-toggle-checkbox:not(:checked) ~ .navbar {
        position: fixed;
        top: 0;
        right: -100vh;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background: var(--main-color);
        opacity: 90%;
        border-left: 4px solid var(--secondary-color);
        padding: 150px 5% 0 50px;
        z-index: 1;
        transition: 400ms;
    }
    .nav-toggle-checkbox:checked ~ .navbar {
        right: 0;
        transition: 400ms;
    }
    .nav-toggle-checkbox:checked ~ .navbar a {
        color: var(--light-color);
        text-align: right;
        font-size: 1.25em;
    }
}
 
    
<body tabindex="-1">
    <div id="svelte">

        <body>
            <div class="max-width">
                <header class="header horizontal">
                    <div class="title"><img loading="lazy" src="./logo-title.svg" alt="Title"></div> <input type="checkbox" class="nav-toggle-checkbox">
                    <div class="nav-toggle-spans"><span class="nav-span-one"></span> <span class="nav-span-two"></span> <span class="nav-span-three"></span></div>
                    <nav class="navbar"><a href="/">Home</a> <a href="elements">Elements</a> <a href="services">Services</a> <a href="contact">Contact</a></nav>
                </header>
                <!--<Header>-->

                <head>
                    <title>Home - CSS Templates</title>
                </head>
                <section class="vertical">
                    <h2>2 Columns</h2>
                    <div class="wrap columns-two">
                        <div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Amet luctus
                                venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis
                                eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet
                                consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque
                                diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus
                                scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed
                                faucibus turpis in eu mi bibendum neque egestas congue. Etiam non quam
                                lacus suspendisse faucibus interdum posuere lorem. Malesuada fames ac
                                turpis egestas maecenas pharetra. Lorem ipsum dolor sit amet
                                consectetur. Ut enim blandit volutpat maecenas volutpat blandit aliquam
                                etiam erat. Id aliquet risus feugiat in ante metus.</p>
                        </div>
                        <div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Amet luctus
                                venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis
                                eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet
                                consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque
                                diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus
                                scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed
                                faucibus turpis in eu mi bibendum neque egestas congue. Etiam non quam
                                lacus suspendisse faucibus interdum posuere lorem. Malesuada fames ac
                                turpis egestas maecenas pharetra. Lorem ipsum dolor sit amet
                                consectetur. Ut enim blandit volutpat maecenas volutpat blandit aliquam
                                etiam erat. Id aliquet risus feugiat in ante metus.</p>
                        </div>
                    </div>
                </section>
                <!--<ColumnsTwo>-->
                <section class="vertical max-height">
                    <h2>3 Columns</h2>
                    <div class="wrap columns-three">
                        <div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Amet luctus
                                venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis
                                eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet
                                consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque
                                diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus
                                scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed
                                faucibus turpis in eu mi bibendum neque egestas congue.</p>
                        </div>
                        <div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Amet luctus
                                venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis
                                eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet
                                consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque
                                diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus
                                scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed
                                faucibus turpis in eu mi bibendum neque egestas congue.</p>
                        </div>
                        <div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Amet luctus
                                venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis
                                eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet
                                consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque
                                diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus
                                scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed
                                faucibus turpis in eu mi bibendum neque egestas congue.</p>
                        </div>
                    </div>
                </section>
                <!--<ColumnsThree>-->
                <section class="vertical">
                    <hr>
                    <h2>4 Columns</h2>
                    <div class="wrap columns-four">
                        <div class="box"></div>
                        <div class="box"></div>
                        <div class="box"></div>
                        <div class="box"></div>
                    </div>
                    <hr>
                </section>
                <!--<ColumnsFour>-->
                <section class="vertical">
                    <hr>
                    <h2>6 Columns</h2>
                    <div class="wrap columns-six">
                        <div class="box"></div>
                        <div class="box"></div>
                        <div class="box"></div>
                        <div class="box"></div>
                        <div class="box"></div>
                        <div class="box"></div>
                    </div>
                    <hr>
                </section>
                <!--<ColumnsSix>-->
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Amet luctus venenatis lectus
                    magna fringilla urna porttitor rhoncus dolor. Nisi quis eleifend quam
                    adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet consectetur
                    adipiscing. Eu consequat ac felis donec et odio pellentesque diam. Volutpat
                    commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Sem et
                    tortor consequat id porta nibh venenatis cras. Sed faucibus turpis in eu mi
                    bibendum neque egestas congue. Etiam non quam lacus suspendisse faucibus
                    interdum posuere lorem. Malesuada fames ac turpis egestas maecenas pharetra.
                    Lorem ipsum dolor sit amet consectetur. Ut enim blandit volutpat maecenas
                    volutpat blandit aliquam etiam erat. Id aliquet risus feugiat in ante metus.</p>
        </body>
        <div id="svelte-announcer" aria-live="assertive" aria-atomic="true" class="s-jHz34e3aRDB7"></div>
    </div>

    <footer>
        <p class="socials"><a href="www.facebook.com" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg" alt="facebook"></a>&nbsp;&nbsp;
            <a href="www.facebook.com" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg" alt="facebook"></a>&nbsp;&nbsp;
            <a href="www.facebook.com" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg" alt="facebook"></a>
        </p>
        <p>This website was designed by <a href="google.com">Name</a></p>
    </footer>
</body>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么带有文本的滚动div超出其容器？ - Why does my scrolling div with text extend beyond its container? 为什么我的 web 页面的宽度没有填满整个屏幕宽度？ - Why does the width of my web page not fill the entire screen width? 为什么我的 web 页面的宽度会根据它显示的屏幕而变化？ - Why does the width of my web page changing depending on the screen it displayed at? 为什么我的导航栏没有在页面上完全扩展宽度？ - Why doesn't my navbar fully extend in width over the page? 为什么我的下拉菜单没有完全显示在页面上？ - Why does my dropdown don't extend fully on my page? 为什么我的 html web 没有扩展背景，部分显示为白色？ - Why does my html web not extend the background and show parts in white? 为什么我的表单生成的用户注释超出了固定宽度表格和div的边界？ - Why does my form-generated user comment expand beyond borders of a fixed width table and div? 为什么这个容器会扩展到视口之外？ - Why does this container expand beyond the viewport? 为什么我的页脚位于视口的底部而不是页面的底部？ - Why is my footer at the bottom of the viewport and not the bottom of the page? 当我调整大小时，我的 Bootstrap 行超出了页面宽度？ - My Bootstrap row is extending beyond the page width when I resize it?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM