Ensure that the website content maintains a full 100% height even while resizing

Is there a way to make my website resize its height instead of width when zooming out? I want the red box at the bottom to stay fixed while the other content adjusts. Any suggestions?

.menu {
  cursor: pointer;
}

.mario {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 200px;
}
... (CSS code continues)

</div>

I'm aiming for this design when zoomed out: https://i.sstatic.net/6sahf.png

Currently, it looks different and doesn't maintain the layout as desired.

My goal is to have the bottom red box remain fixed at the bottom of the webpage without being affected by the other content resizing. Ideally, the page should adjust its height rather than its width when zoomed out.

Answer №1

Your issue arises from a lack of setting a maximum width for high-resolution screens.

In order to address this, I have included the following code snippet that establishes a max-width: 768px; for your content, which is customizable according to your needs.

Additionally, for the bottom footer, consider utilizing the entirety of the body as a flexbox and applying margin-top: auto; specifically on .bottom.

/*Transform the entire body into 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; /*Prevent content from stretching too far*/
}

.left {
  width: 15%;
}

.right {
  width: 15%;
}

.center {
  width: 70%;
  background-color: antiquewhite;
}

.bottom {
  background-color: red;
  width: 100%;
  height: 100px;
  margin-top: auto; /*Affix 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Google App Engine displaying a blank screen error

I've been playing around with this concept where there's a table of 'events' on a '/search' page. When the 'GO' button of an event is clicked, it should increase the 'RSVP' count for that event and redirect ...

Tips for transferring parameters using a href tag without causing a page refresh

Is there a way to pass parameter values without refreshing the page? I would appreciate any help. Thank you. searchresult.php <a href="index.php?id=<?php echo $data['ID']?>">clickme</a> index.php <?php echo $_GET['id ...

Toggle the visibility of table TDs by clicking on a specific TD cell

I came across a solution that perfectly addressed my issue, but I'm struggling to implement it in my code correctly. I managed to get it to work initially, but then everything suddenly stopped functioning... Show or hide table row if user clicks on i ...

Creating a looping animation on multiple elements using jQuery that makes them fade in and out at different intervals

I am currently working on creating a fade in and out animation for multiple elements using jquery. It's a bit complex to explain, so I will start by sharing the relevant code. $(document).ready(function() { $("#1").delay(0).animate({ ...

Obtaining metadata from Youtube videos with Javascript and HTML5

Is there a way to fetch YouTube video data with Javascript and HTML5? If so, could you provide some helpful resources or links? ...

What could be preventing the fill color of my SVG from changing when I hover over it?

I am currently utilizing VueJS to design an interactive map showcasing Japan. The SVG I am using is sourced from Wikipedia. My template structure is illustrated below (The crucial classes here are the prefecture and region classes): <div> <svg ...

Expanding a list of object arrays through iteration: A step-by-step guide

// Initializing with one object let posi_val=[{top: '3px', left: '2px'}]; // Adding another object in the loop for (let i = 1; i < n; i++) { posi_val.push({ top: `${posi_val[i - 1].top.slice(0, -2) * 2}px`, l ...

Are there any alternatives similar to the reverse sr-only feature in Bootstrap 4?

I implemented the use of .sr-only to ensure compatibility with text-based browsers such as Lynx. This allows for the display of an ASCII logo in the header for those using standart GUI browsers like Firefox, while displaying the normal graphical logo for o ...

Troubleshooting: Images not appearing on HTML pages

I've recently started learning HTML and can't figure out why my code isn't working. I am trying to add an image but it only appears as a blue box with a question mark in it. Here is my code: <head> <title>Welcome</title> ...

What is the best method to use jQuery Validation Plugin to ensure users select "yes" from at least one of multiple select tags?

Using the jQuery Validation Plugin, I am currently implementing form validation in the following manner. Within the form, there are multiple select tags each with a default value of "Select" and two additional options: "Yes" and "No". These select tags are ...

Troubleshooting the problem of divs overlapping when scrolling in JavaScript

I am experiencing some issues with full screen divs that overlay each other on scroll and a background image. When scrolling back to the top in Chrome, the background shifts down slightly, and in Safari, the same issue occurs when scrolling down. I have cr ...

Ways to eliminate the white overlay that occurs on the page after clicking the scroll top button

Hi there! I've been busy with updating my site at , and noticed a small glitch. Every time I hit the Back to Top button at the bottom of the page, the screen goes white. Any ideas on how to fix this issue? Thanks in advance! ...

Displaying individual attributes of objects through v-for loop

I have created a table-making component to streamline the process of creating multiple tables. Each table consists of three key elements: The object (an array of objects with one row per object) Headers specific to each table The object properties that n ...

Is it possible to generate this result using only Bootstrap 5.2.3?

I'm currently working on a simple HTML project that aims to replicate the layout shown in the image below. I want the output to look exactly like what's displayed in the provided image. The task does not require CSS, only Bootstrap is needed for ...

The data within my <ui:define name="content"> element is not displaying on the JSF view

I'm currently working on a project that involves JSF/Facelets and a Style Sheet for styling my JSF view. I'm trying to add some graphical components like "h:inputText" and "h:commandButton" tags to my view XHTML, but for some reason, they are not ...

Adding Firebase Data to Vue Table

I am currently utilizing Vue Table JS, which can be found at https://github.com/matfish2/vue-tables-2 <script type="text/javascript"> Vue.use(VueTables.ClientTable); new Vue({ el: "#app", data: { columns: ['name', 'code', ...

Applying Compiled CSS file in Node.js using Express and SASS not working as expected

Recently, I've delved into utilizing NodeJS with Express to serve my pug files. In addition, I decided to incorporate the "express-sass-middleware" to compile and serve the scss/css files in my project. While everything seems to be functioning as expe ...

Place the select option within the input field

input { width: 100%; } .input-currency:after { position: absolute; right: 0; top: 10px; content: 'USD'; border-left: 1px solid black; padding: 0 7px; padding-right: 4em; } <div class="input-currency"> <input id="value" ...

Use jQuery to create a toggle effect with unique attributes and incorporate AJAX functionality

When using this jQuery plugin for creating toggles, I encountered an issue with multiple toggles having the same IDs and classes. This made it difficult to identify a specific toggle to apply auto load ajax when the value changed. I'm wondering how I ...

I want to perfectly center the text horizontally within a table while still aligning it to the left [Using HTML and CSS]

I have a few tables displayed on my website and I am seeking ways to enhance their appearance. Here is how my table currently appears (http://prntscr.com/gpa4w6) I am aiming for this desired look (http://prntscr.com/gpa52q) In the image above, you can n ...