使网站内容在调整大小时始终保持 100% 高度
Make content of website always have 100% height when resizing
我的网站在调整大小时始终具有相同的宽度，但是，我希望它具有相同的高度，以便在缩小时缩小宽度。
.menu {
cursor: pointer;
}
.mario {
display: block;
margin-left: auto;
margin-right: auto;
width: 200px;
}
.topContent {
background-color: red;
height: 100px;
width: 70%;
margin: auto;
justify-content: center;
align-items: center;
display: flex;
}
.mainContent {
height: 100%;
width: 100%;
margin: 0 auto 50px;
justify-content: center;
align-items: center;
display: flex;
flex-wrap: wrap;
}
.left {
width: 15%;
}
.right {
width: 15%;
}
.center {
width: 70%;
background-color: antiquewhite;
}
.bottom {
background-color: red;
width: 100%;
height: 100px;
}
body {
background-color: saddlebrown;
}
.mariogif {
float: right;
width: 200px;
margin: auto 20px auto 10px;
}
<div class="mainContent">
<div class="left"></div>
<div class="center">
<p class="aboutp1">Super Mario is a 2D and 3D platform game series created by Nintendo based on and starring the fictional plumber Mario. Alternatively called the Super Mario Bros series or simply the Mario series, it is the central series of the greater Mario franchise.
At least one Super Mario game has been released for every major Nintendo video game console. There are over twenty games in the series.
</p>
<p class="aboutp2">
The Super Mario games are set primarily in the fictional Mushroom Kingdom, typically with Mario as the player character. He is usually joined by his brother, Luigi, and often by other members of the Mario cast. As platform games, they involve the player
character running and jumping across platforms and atop enemies in themed levels. The games have simple plots, typically with Mario and Luigi rescuing the kidnapped Princess Peach from the primary antagonist, Bowser. The first game in the series,
Super Mario Bros., released for the Nintendo Entertainment System (NES) in 1985, established the series' core gameplay concepts and elements. These include a multitude of power-ups and items that give the character special powers such as fireball-throwing
and size-changing.
</p>
<img src="../resources/mario-super.gif" alt="Mario Gif" class="mariogif">
<p class="aboutp3">
The Super Mario series is part of the greater Mario franchise, which includes other video game genres and media such as film, television, printed media, and merchandise. More than 380 million copies of Super Mario games have been sold worldwide, making
it the fourth-bestselling video game series, behind the larger Mario franchise, the puzzle series Tetris, and first-person shooter series Call of Duty.</p>
<p class="aboutp4">The objective of the game is to progress through levels by defeating enemies, collecting items and solving puzzles without dying. Power-up use is integral to the series. The series has installments featuring both two and three-dimensional gameplay.
In the 2D games, the player character (usually Mario) jumps on platforms and enemies while avoiding their attacks and moving to the right of the scrolling screen. 2D Super Mario game levels have single-exit objectives, which must be reached within
a time limit and lead to the next sequential level. Super Mario Bros. 3 introduced the overworld, a map of nonlinear levels that branches according to the player's choice.[42] Super Mario World introduced levels with multiple exits.</p>
<p class="aboutp5">
3D installments in the series have had two subgenres: open world exploration based games and more linear 3D games with a predetermined path. Levels in the open world games, 64, Sunshine and Odyssey, allow the player to freely explore multiple enclosed
environments in 360 degree movement. As the game progresses, more environments become accessible. The linear 3D games, Galaxy, Galaxy 2, 3D Land and 3D World, feature more fixed camera angles and a predetermined path to a single goal.</p>
</div>
<div class="right"><img src="../resources/mario.png" alt="Mario Image" class="mario"></div>
</div>
<div class="bottom">
</div>
</div>
我希望它在缩小时看起来像这样：
但看起来像这样：
基本上我想要的是底部的红框始终停留在页面底部，不随其他内容移动。所以我希望页面内容在缩小时调整高度而不是宽度。
你的问题是你没有为 high-resolution 屏幕设置最大宽度。
在下面的代码片段中，我为您的内容设置了 max-width: 768px;。您可以根据自己的喜好进行修改。
对于底部页脚，您应该将整个 body 作为 flexbox，然后在 .bottom 上设置 margin-top: auto;。
/*Make the entire body as a column flexbox*/
body {
margin: 0 auto;
display: flex;
flex-direction: column;
}
.menu {
cursor: pointer;
}
.mario {
display: block;
margin-left: auto;
margin-right: auto;
}
.topContent {
background-color: red;
height: 100px;
width: 70%;
margin: auto;
justify-content: center;
align-items: center;
display: flex;
}
.mainContent {
height: 100%;
width: 100%;
margin: 0 auto 50px;
justify-content: center;
align-items: center;
display: flex;
flex-wrap: wrap;
max-width: 768px; /*Limit width to make content non-stretched*/
}
.left {
width: 15%;
}
.right {
width: 15%;
}
.center {
width: 70%;
background-color: antiquewhite;
}
.bottom {
background-color: red;
width: 100%;
height: 100px;
margin-top: auto; /*Stick the footer to the bottom*/
}
body {
background-color: saddlebrown;
}
.mariogif {
float: right;
width: 200px;
margin: auto 20px auto 10px;
}
<div class="mainContent">
<div class="left"></div>
<div class="center">
<p class="aboutp1">Super Mario is a 2D and 3D platform game series created by Nintendo based on and starring the fictional plumber Mario. Alternatively called the Super Mario Bros series or simply the Mario series, it is the central series of the greater Mario franchise.
At least one Super Mario game has been released for every major Nintendo video game console. There are over twenty games in the series.
</p>
<p class="aboutp2">
The Super Mario games are set primarily in the fictional Mushroom Kingdom, typically with Mario as the player character. He is usually joined by his brother, Luigi, and often by other members of the Mario cast. As platform games, they involve the player
character running and jumping across platforms and atop enemies in themed levels. The games have simple plots, typically with Mario and Luigi rescuing the kidnapped Princess Peach from the primary antagonist, Bowser. The first game in the series,
Super Mario Bros., released for the Nintendo Entertainment System (NES) in 1985, established the series' core gameplay concepts and elements. These include a multitude of power-ups and items that give the character special powers such as fireball-throwing
and size-changing.
</p>
<img src="../resources/mario-super.gif" alt="Mario Gif" class="mariogif">
</div>
<div class="right"><img src="../resources/mario.png" alt="Mario Image" class="mario"></div>
</div>
<div class="bottom">
</div>
我的网站在调整大小时始终具有相同的宽度，但是，我希望它具有相同的高度，以便在缩小时缩小宽度。
.menu {
cursor: pointer;
}
.mario {
display: block;
margin-left: auto;
margin-right: auto;
width: 200px;
}
.topContent {
background-color: red;
height: 100px;
width: 70%;
margin: auto;
justify-content: center;
align-items: center;
display: flex;
}
.mainContent {
height: 100%;
width: 100%;
margin: 0 auto 50px;
justify-content: center;
align-items: center;
display: flex;
flex-wrap: wrap;
}
.left {
width: 15%;
}
.right {
width: 15%;
}
.center {
width: 70%;
background-color: antiquewhite;
}
.bottom {
background-color: red;
width: 100%;
height: 100px;
}
body {
background-color: saddlebrown;
}
.mariogif {
float: right;
width: 200px;
margin: auto 20px auto 10px;
}
<div class="mainContent">
<div class="left"></div>
<div class="center">
<p class="aboutp1">Super Mario is a 2D and 3D platform game series created by Nintendo based on and starring the fictional plumber Mario. Alternatively called the Super Mario Bros series or simply the Mario series, it is the central series of the greater Mario franchise.
At least one Super Mario game has been released for every major Nintendo video game console. There are over twenty games in the series.
</p>
<p class="aboutp2">
The Super Mario games are set primarily in the fictional Mushroom Kingdom, typically with Mario as the player character. He is usually joined by his brother, Luigi, and often by other members of the Mario cast. As platform games, they involve the player
character running and jumping across platforms and atop enemies in themed levels. The games have simple plots, typically with Mario and Luigi rescuing the kidnapped Princess Peach from the primary antagonist, Bowser. The first game in the series,
Super Mario Bros., released for the Nintendo Entertainment System (NES) in 1985, established the series' core gameplay concepts and elements. These include a multitude of power-ups and items that give the character special powers such as fireball-throwing
and size-changing.
</p>
<img src="../resources/mario-super.gif" alt="Mario Gif" class="mariogif">
<p class="aboutp3">
The Super Mario series is part of the greater Mario franchise, which includes other video game genres and media such as film, television, printed media, and merchandise. More than 380 million copies of Super Mario games have been sold worldwide, making
it the fourth-bestselling video game series, behind the larger Mario franchise, the puzzle series Tetris, and first-person shooter series Call of Duty.</p>
<p class="aboutp4">The objective of the game is to progress through levels by defeating enemies, collecting items and solving puzzles without dying. Power-up use is integral to the series. The series has installments featuring both two and three-dimensional gameplay.
In the 2D games, the player character (usually Mario) jumps on platforms and enemies while avoiding their attacks and moving to the right of the scrolling screen. 2D Super Mario game levels have single-exit objectives, which must be reached within
a time limit and lead to the next sequential level. Super Mario Bros. 3 introduced the overworld, a map of nonlinear levels that branches according to the player's choice.[42] Super Mario World introduced levels with multiple exits.</p>
<p class="aboutp5">
3D installments in the series have had two subgenres: open world exploration based games and more linear 3D games with a predetermined path. Levels in the open world games, 64, Sunshine and Odyssey, allow the player to freely explore multiple enclosed
environments in 360 degree movement. As the game progresses, more environments become accessible. The linear 3D games, Galaxy, Galaxy 2, 3D Land and 3D World, feature more fixed camera angles and a predetermined path to a single goal.</p>
</div>
<div class="right"><img src="../resources/mario.png" alt="Mario Image" class="mario"></div>
</div>
<div class="bottom">
</div>
</div>
我希望它在缩小时看起来像这样：
但看起来像这样：
基本上我想要的是底部的红框始终停留在页面底部，不随其他内容移动。所以我希望页面内容在缩小时调整高度而不是宽度。
你的问题是你没有为 high-resolution 屏幕设置最大宽度。
在下面的代码片段中，我为您的内容设置了 max-width: 768px;。您可以根据自己的喜好进行修改。
对于底部页脚，您应该将整个 body 作为 flexbox，然后在 .bottom 上设置 margin-top: auto;。
/*Make the entire body as a column flexbox*/
body {
margin: 0 auto;
display: flex;
flex-direction: column;
}
.menu {
cursor: pointer;
}
.mario {
display: block;
margin-left: auto;
margin-right: auto;
}
.topContent {
background-color: red;
height: 100px;
width: 70%;
margin: auto;
justify-content: center;
align-items: center;
display: flex;
}
.mainContent {
height: 100%;
width: 100%;
margin: 0 auto 50px;
justify-content: center;
align-items: center;
display: flex;
flex-wrap: wrap;
max-width: 768px; /*Limit width to make content non-stretched*/
}
.left {
width: 15%;
}
.right {
width: 15%;
}
.center {
width: 70%;
background-color: antiquewhite;
}
.bottom {
background-color: red;
width: 100%;
height: 100px;
margin-top: auto; /*Stick the footer to the bottom*/
}
body {
background-color: saddlebrown;
}
.mariogif {
float: right;
width: 200px;
margin: auto 20px auto 10px;
}
<div class="mainContent">
<div class="left"></div>
<div class="center">
<p class="aboutp1">Super Mario is a 2D and 3D platform game series created by Nintendo based on and starring the fictional plumber Mario. Alternatively called the Super Mario Bros series or simply the Mario series, it is the central series of the greater Mario franchise.
At least one Super Mario game has been released for every major Nintendo video game console. There are over twenty games in the series.
</p>
<p class="aboutp2">
The Super Mario games are set primarily in the fictional Mushroom Kingdom, typically with Mario as the player character. He is usually joined by his brother, Luigi, and often by other members of the Mario cast. As platform games, they involve the player
character running and jumping across platforms and atop enemies in themed levels. The games have simple plots, typically with Mario and Luigi rescuing the kidnapped Princess Peach from the primary antagonist, Bowser. The first game in the series,
Super Mario Bros., released for the Nintendo Entertainment System (NES) in 1985, established the series' core gameplay concepts and elements. These include a multitude of power-ups and items that give the character special powers such as fireball-throwing
and size-changing.
</p>
<img src="../resources/mario-super.gif" alt="Mario Gif" class="mariogif">
</div>
<div class="right"><img src="../resources/mario.png" alt="Mario Image" class="mario"></div>
</div>
<div class="bottom">
</div>