色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

為什么我的網頁寬度超出了我的視窗？

CSS
夏志豪2年前8瀏覽0評論

我有這個網頁。網頁的所有內容都在我的桌面視窗的大小之內。但是，頁面的寬度仍然超出了視口。我甚至試著將邊距和填充值設置為0，但是沒有效果。在移動視圖中看起來也特別笨拙。我該如何解決這個問題？

下面是代碼:

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

轉到CSS的頂部，將& quot* { width:100% } & quot；。如果這不起作用，您可能需要手動更改寬度，直到它適合您的視口大小。

將頁腳CSS寬度單位從vw更改為%:

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

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