My website always has the same width when resizing, however, I want it to have the same height instead so that the width shrinks when zooming out.
.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 >
<div ></div>
<div >
<p >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 >
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" >
<p >
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 >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 >
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 ><img src="../resources/mario.png" alt="Mario Image" ></div>
</div>
<div >
</div>
</div>I want it to look like this when zoomed out: 
But it looks like this:
Basically what I want is that the red box at the bottom always stays at the bottom of the page and doesn't move with the other content. So I want the content of the page to resize the height instead of the width when zooming out.
CodePudding user response：
Your problem is you don't set a max width for a high-resolution screen.
In the below code snippet, I set it max-width: 768px; for your content. You can modify it at your choice.
For the bottom footer, you should have the entire body as a flexbox and then set margin-top: auto; on .bottom.
/*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 >
<div ></div>
<div >
<p >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 >
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" >
</div>
<div ><img src="../resources/mario.png" alt="Mario Image" ></div>
</div>
<div >
</div>