https://capr1sun.github.io/popsociology/
我的网站主页在右侧有一个额外的空间，当我模拟较小的设备(iPhone)时会显示出来。在我的桌面上，底部有一个水平滚动条。如何去掉多余的空间，使内容完全适合屏幕？
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,900&display=swap');
:root {
--mainbgcolor: #FDFBEC;
--logo: #F4C553;
--green: #E1EEDD;
--greentext: #153A1E;
--orange: #EE9F4A;
}
html, body {
margin: 0 auto;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Merriweather', serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--mainbgcolor);
color: var(--logo);
padding: 0px 20px;
font-size: small;
}
#logo {
font-weight: 900;
}
header a, li {
text-decoration: none;
list-style: none;
color: var(--orange);
font-weight: 700;
}
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 16px
}
main {
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
.icon-container {
padding: 10px 20px;
display: grid;
gap: 15px;
grid-template-columns: auto auto auto auto auto;
justify-content: center;
}
.info-icons-container {
padding: 5px 20px;
text-align: center;
}
#conceptName {
font-weight: 700;
font-size: 2rem;
margin: 5px 0px 10px 0px;
}
.conceptInfo {
font-size: 0.8rem;
}
footer {
background-color: var(--orange);
color: var(--mainbgcolor);
text-align: center;
margin-top: auto;
}
.icon img {
width: 55px;
height: auto;
cursor: pointer;
}
.icon img:hover {
box-shadow: 0 0 5px 5px var(--orange);
}
.info-icons-container {
align-items: center;
justify-content: center;
animation: transitionIn 0.75s;
}
/*transition*/
@keyframes transitionIn {
from {
opacity: 0;
transform: rotateX(-10deg);
}
to {
opacity: 1;
transform: rotateX(0);
}
}
/* ABOUT PAGE */
.about {
display: flex;
flex-direction: column;
padding: 20px;
}
.large-img-container {
display: flex;
align-items: center;
justify-content: center;
}
.large-img-container img {
display: block;
width: 200px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 20px;
text-align: center;
}
.about h1, .about h3 {
color: var(--orange);
}
.about p {
text-align: justify;
}
/*SLIDER PAGE*/
.imgslider {
align-items: center;
justify-content: center;
}
.controls {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
justify-content: center;
}
@media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 80px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1190px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
@media (min-width:1200px) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 50px;
}
.info-icons-container {
margin-bottom: 20px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
footer {
width: 100%;
}
}
@media (min-width:1281px) {
header {
font-size: large;
padding: 0 5px;
justify-content: space-around;
}
footer {
width: 100vw;
}
.icon-container {
gap: 30px;
}
main {
align-items: center;
}
.info-icons-container {
width: 50%;
}
#description{
font-size: 1.5rem;
}
.about {
display: flex;
flex-direction: row;
padding: 20px 100px 20px 20px;
}
.large-img-container {
display: block;
padding-left: 200px;
}
.large-img-container img {
width: 500px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 100px;
display: block;
}
.about h1, .about h3 {
color: var(--orange);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop Sociology</title>
</head>
<body id="body">
<header>
<div class="left">
<h1 id="logo">Pop Sociology!</h1>
</div>
<div class="right">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</header>
<main>
<div class="icon-container">
<div class="icon">
<a href="page1.html"><img src="whatissocio2.png" alt="What is Sociology?" id="whatIsSociologyIcon"></a>
</div>
<div class="icon">
<a href="page2.html"><img src="sociotheory2.png" alt="Sociological Theories" id="socioTheoriesIcon"></a>
</div>
<div class="icon">
<a href="page3.html"><img src="interactionist2.png" alt="Interactionist Perspective" id="interactionistIcon"></a>
</div>
<div class="icon">
<a href="page4.html"><img src="conflict2.png" alt="Conflict Perspective" id="conflictIcon"></a>
</div>
<div class="icon">
<a href="page5.html"><img src="functionalist2.png" alt="Functionalist Perspective" id="functionalistIcon"></a>
</div>
<div class="icon">
<a href="page6.html"><img src="socialization2.png" alt="Socialization" id="socialization"></a>
</div>
<div class="icon">
<a href="page7.html"><img src="formssocializatin2.png" alt="Forms of Socialization" id="formsSocializationIcon"></a>
</div>
<div class="icon">
<a href="page8.html"><img src="exchange2.png" alt="Social Exchange Theory" id="exchangeIcon"></a>
</div>
<div class="icon">
<a href="page9.html"><img src="sociallearning2.png" alt="Social Learning Theory" id="learningIcon"></a>
</div>
<div class="icon">
<a href="page10.html"><img src="labeling2.png" alt="Labeling Theory" id="labelingIcon"></a>
</div>
<div class="icon">
<a href="page11.html"><img src="feminism2.png" alt="Feminist Theory" id="feminismIcon"></a>
</div>
<div class="icon">
<a href="page12.html"><img src="critical2.png" alt="Critical Theory" id="criticalIcon"></a>
</div>
<div class="icon">
<a href="page13.html"><img src="strain2.png" alt="Social Strain Theory" id="strainIcon"></a>
</div>
<div class="icon">
<a href="page14.html"><img src="rational2.png" alt="Rational Theory" id="rationalIcon"></a>
</div>
<div class="icon">
<a href="page15.html"><img src="game2.png" alt="Game Theory" id="gameIcon"></a>
</div>
<div class="icon">
<a href="page16.html"><img src="sociobiology2.png" alt="Sociobiology" id="sociobiologyIcon"></a>
</div>
<div class="icon">
<a href="page17.html"><img src="chaos2.png" alt="Chaos Theory" id="chaosIcon"></a>
</div>
<div class="icon">
<a href="page18.html"><img src="gears2.png" alt="Social Phenomenology" id="phenomonologyIcon"></a>
</div>
<div class="icon">
<a href="page19.html"><img src="disengagement2.png" alt="Disengagement Theory" id="disengagementIcon"></a>
</div>
<div class="icon">
<a href="page20.html"><img src="macro2.png" alt="Macro Theory" id="macroIcon"></a>
</div>
<div class="icon">
<a href="page21.html"><img src="comte2.png" alt="August Comte" id="comteIcon"></a>
</div>
<div class="icon">
<a href="page22.html"><img src="marx2.png" alt="Karl Marx" id="marxIcon"></a>
</div>
<div class="icon">
<a href="page23.html"><img src="durkheim2.png" alt="Emile Durkheim" id="durkheimIcon"></a>
</div>
<div class="icon">
<a href="page24.html"><img src="weber2.png" alt="Max Weber" id="weberIcon"></a>
</div>
<div class="icon">
<a href="page25.html"><img src="spencer2.png" alt="Herbert Spencer" id="spencerIcon"></a>
</div>
</div>
<div class="info-icons-container">
<h3 id="conceptName"><span id="conceptNameDisplay">Bite-sized sociology for the new generation!</h3></span>
<p id="description"><span id="conceptInfoDisplay">What do you want to learn today?</span></p></span>
</div>
</main>
<footer>
<p>Created by Me</p>
</footer>
<script src="script.js"></script>
</body>
</html>问题出在中
footer {
width: 100vw;
}
您可以删除它，或者使用100%而不是100vw，并将width: 100%添加到body标记中。
由于锚文本的大小，出现了滚动。因此，您可以设置它们的相对大小。例如font-size: 2.2vw用于.icon-container:
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,900&display=swap');
:root {
--mainbgcolor: #FDFBEC;
--logo: #F4C553;
--green: #E1EEDD;
--greentext: #153A1E;
--orange: #EE9F4A;
}
html, body {
margin: 0 auto;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Merriweather', serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--mainbgcolor);
color: var(--logo);
padding: 0px 20px;
font-size: small;
}
#logo {
font-weight: 900;
}
header a, li {
text-decoration: none;
list-style: none;
color: var(--orange);
font-weight: 700;
}
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 16px
}
main {
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
.icon-container {
padding: 10px 20px;
display: grid;
gap: 15px;
grid-template-columns: auto auto auto auto auto;
justify-content: center;
font-size: 2.2vw; /* here */
}
.info-icons-container {
padding: 5px 20px;
text-align: center;
}
#conceptName {
font-weight: 700;
font-size: 2rem;
margin: 5px 0px 10px 0px;
}
.conceptInfo {
font-size: 0.8rem;
}
footer {
background-color: var(--orange);
color: var(--mainbgcolor);
text-align: center;
margin-top: auto;
}
.icon img {
width: 55px;
height: auto;
cursor: pointer;
}
.icon img:hover {
box-shadow: 0 0 5px 5px var(--orange);
}
.info-icons-container {
align-items: center;
justify-content: center;
animation: transitionIn 0.75s;
}
/*transition*/
@keyframes transitionIn {
from {
opacity: 0;
transform: rotateX(-10deg);
}
to {
opacity: 1;
transform: rotateX(0);
}
}
/* ABOUT PAGE */
.about {
display: flex;
flex-direction: column;
padding: 20px;
}
.large-img-container {
display: flex;
align-items: center;
justify-content: center;
}
.large-img-container img {
display: block;
width: 200px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 20px;
text-align: center;
}
.about h1, .about h3 {
color: var(--orange);
}
.about p {
text-align: justify;
}
/*SLIDER PAGE*/
.imgslider {
align-items: center;
justify-content: center;
}
.controls {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
justify-content: center;
}
@media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 80px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1190px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
@media (min-width:1200px) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 50px;
}
.info-icons-container {
margin-bottom: 20px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
footer {
width: 100%;
}
}
@media (min-width:1281px) {
header {
font-size: large;
padding: 0 5px;
justify-content: space-around;
}
footer {
width: 100vw;
}
.icon-container {
gap: 30px;
}
main {
align-items: center;
}
.info-icons-container {
width: 50%;
}
#description{
font-size: 1.5rem;
}
.about {
display: flex;
flex-direction: row;
padding: 20px 100px 20px 20px;
}
.large-img-container {
display: block;
padding-left: 200px;
}
.large-img-container img {
width: 500px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 100px;
display: block;
}
.about h1, .about h3 {
color: var(--orange);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop Sociology</title>
</head>
<body id="body">
<header>
<div class="left">
<h1 id="logo">Pop Sociology!</h1>
</div>
<div class="right">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</header>
<main>
<div class="icon-container">
<div class="icon">
<a href="page1.html"><img src="whatissocio2.png" alt="What is Sociology?" id="whatIsSociologyIcon"></a>
</div>
<div class="icon">
<a href="page2.html"><img src="sociotheory2.png" alt="Sociological Theories" id="socioTheoriesIcon"></a>
</div>
<div class="icon">
<a href="page3.html"><img src="interactionist2.png" alt="Interactionist Perspective" id="interactionistIcon"></a>
</div>
<div class="icon">
<a href="page4.html"><img src="conflict2.png" alt="Conflict Perspective" id="conflictIcon"></a>
</div>
<div class="icon">
<a href="page5.html"><img src="functionalist2.png" alt="Functionalist Perspective" id="functionalistIcon"></a>
</div>
<div class="icon">
<a href="page6.html"><img src="socialization2.png" alt="Socialization" id="socialization"></a>
</div>
<div class="icon">
<a href="page7.html"><img src="formssocializatin2.png" alt="Forms of Socialization" id="formsSocializationIcon"></a>
</div>
<div class="icon">
<a href="page8.html"><img src="exchange2.png" alt="Social Exchange Theory" id="exchangeIcon"></a>
</div>
<div class="icon">
<a href="page9.html"><img src="sociallearning2.png" alt="Social Learning Theory" id="learningIcon"></a>
</div>
<div class="icon">
<a href="page10.html"><img src="labeling2.png" alt="Labeling Theory" id="labelingIcon"></a>
</div>
<div class="icon">
<a href="page11.html"><img src="feminism2.png" alt="Feminist Theory" id="feminismIcon"></a>
</div>
<div class="icon">
<a href="page12.html"><img src="critical2.png" alt="Critical Theory" id="criticalIcon"></a>
</div>
<div class="icon">
<a href="page13.html"><img src="strain2.png" alt="Social Strain Theory" id="strainIcon"></a>
</div>
<div class="icon">
<a href="page14.html"><img src="rational2.png" alt="Rational Theory" id="rationalIcon"></a>
</div>
<div class="icon">
<a href="page15.html"><img src="game2.png" alt="Game Theory" id="gameIcon"></a>
</div>
<div class="icon">
<a href="page16.html"><img src="sociobiology2.png" alt="Sociobiology" id="sociobiologyIcon"></a>
</div>
<div class="icon">
<a href="page17.html"><img src="chaos2.png" alt="Chaos Theory" id="chaosIcon"></a>
</div>
<div class="icon">
<a href="page18.html"><img src="gears2.png" alt="Social Phenomenology" id="phenomonologyIcon"></a>
</div>
<div class="icon">
<a href="page19.html"><img src="disengagement2.png" alt="Disengagement Theory" id="disengagementIcon"></a>
</div>
<div class="icon">
<a href="page20.html"><img src="macro2.png" alt="Macro Theory" id="macroIcon"></a>
</div>
<div class="icon">
<a href="page21.html"><img src="comte2.png" alt="August Comte" id="comteIcon"></a>
</div>
<div class="icon">
<a href="page22.html"><img src="marx2.png" alt="Karl Marx" id="marxIcon"></a>
</div>
<div class="icon">
<a href="page23.html"><img src="durkheim2.png" alt="Emile Durkheim" id="durkheimIcon"></a>
</div>
<div class="icon">
<a href="page24.html"><img src="weber2.png" alt="Max Weber" id="weberIcon"></a>
</div>
<div class="icon">
<a href="page25.html"><img src="spencer2.png" alt="Herbert Spencer" id="spencerIcon"></a>
</div>
</div>
<div class="info-icons-container">
<h3 id="conceptName"><span id="conceptNameDisplay">Bite-sized sociology for the new generation!</h3></span>
<p id="description"><span id="conceptInfoDisplay">What do you want to learn today?</span></p></span>
</div>
</main>
<footer>
<p>Created by Me</p>
</footer>
<script src="script.js"></script>
</body>
</html>页脚元素中的width属性导致溢出-x这个片段可能会有所帮助：
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Merriweather', serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
footer {
width: 100%;
}