為什么我的 web 頁面的寬度超出了我的視口？
[英]Why does the width of my web page extend beyond my viewport?
問題描述
我有這個 web 頁面。 web 頁面的所有內容都在我桌面視口的大小范圍內。 但是，頁面的寬度仍然超出了視口。 我什至嘗試將邊距和填充設置為 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> . . <a href="www.facebook;com" target="_blank"><img src="https;//upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013:svg" alt="facebook"></a> . . <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 到 CSS 的頂部並放置“* {width: 100%}”。 如果這不起作用，您可能必須手動更改寬度，直到它適合您的視口大小。
如果這對您有幫助，請將此標記為答案。
解決方案2
0 2021-12-12 19:23:46
將頁腳 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>
<a href="www.facebook.com" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg" alt="facebook"></a>
<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>
為什么我的 web 頁面的寬度會根據它顯示的屏幕而變化？
[英]Why does the width of my web page changing depending on the screen it displayed at?
為什么我的 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 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?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.