Question 194774 in Html Question posted in
Some basic documentation can be found here.

Html – Getting the main part of my page to take up the remaining part of the screen

I’m trying to get <div class="main"> to take up the rest of my page.

Right now the main div is just getting as big as the content inside needs.

Actual Main

How do I get my css to force the main area take up the remaining space?

:root{
    --color-header: #5B2333;
    --color-background: #F7F4F3;
    --color-padding: #F24333;
    --color-accent: #564D4A;
    --color-accent-two: #BA1B1D;
    --padding-small: 3px;
    --height-footer: 25px;
}

html{
    height: 100%;
}

body{
    margin: 0px;
    padding: 0px;
    background-color: var(--color-background);
    min-height: 100%;
}

h1, h2 {
    color: var(--color-background)
}

header{
    padding: var(--padding-small);
    background-color: var(--color-header);    
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main{
    padding: 0;
    margin: 0;
    display: flex;    
    min-height: calc(100vh-var(--height-footer)); //this doesn't work
    min-height: 100%; // neither does this

    justify-content: space-evenly;
    align-items: center;
}

#left-btn-group,
#right-btn-group{
    flex-basis: 20%;
    justify-content: center;
    align-items: center;
}

#left-btn-group button{
    display: block;
    width: 75%;
}

footer {
    padding: var(--padding-small);
    position: fixed;
    bottom: 0;
    height: var(--height-footer);
    min-height: var(--header-height);
    background-color: var(--color-header);
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

#canvas {
    width: 50vw;
    height: 50vh;
    display: flex;
    flex-wrap: wrap;
    border: 50px solid var(--color-padding);
    border-radius: 50px;
}

#canvas-border {
    width: 99%;
    height: 99%;
}

Here is the HTML:

<!DOCTYPE html>

<head>
    <title>Sketch-A-Etch</title>
    <script src="javascript.js" defer></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h1>
            Sketch-A-Etch
        </h1>
    </header>
    <div class="main">
        <div id="left-btn-group">
            <!-- 3 buttons for pixel size -->
            <button id="low">Low Resolution</button>
            <button id="medium">Medium Resolution</button>
            <button id="High">High Resolution</button>
            <button id="clear">Clear Canvas</button>
            <input type="color" id="color" value="#ff0000"> Color Picker</button>
            <!-- Buttons to add -->
        </div>
        <div id="canvas"></div>
        <div id="right-btn-group"></div>
    </div>
    <footer>
        <h2>
            Made by [Redacted]
        </h2>
    </footer>
</body>
Tags:

2

Answers


  1. 0

    To make the with the class "main" take up the remaining space of the page, you can use CSS flexbox or CSS grid. Both approaches provide flexible and powerful ways to create layouts. Here’s an example using flexbox:
    HTML:

    CSS:
    html, body {
    height: 100%; /* Ensure the body takes up the full height of the
    viewport /
    margin: 0; /     Remove default margin */
    }

      body {
   display: flex;
   flex-direction: column;
}

.main {
  flex: 1; /* Allow the div to grow and take up remaining space */
}

    In this example, the with the class "main" will stretch to occupy the remaining vertical space within the element. The flex: 1 property on the .main class tells it to grow and take up any available space.

    By using the display: flex property on the element, we create a flex container, and setting flex-direction: column stacks the child elements vertically. The .main class then expands to fill the remaining space along the vertical axis.

    Make sure to place this CSS code within your tags or in an external CSS file linked to your HTML document.

    Login or Signup to reply.
  2. 0 
    :root{
    --color-header: #5B2333;
    --color-background: #F7F4F3;
    --color-padding: #F24333;
    --color-accent: #564D4A;
    --color-accent-two: #BA1B1D;
    --padding-small: 3px;
    --height-footer: 25vh
    /*changed units to 'vh' */
}

html{
    height: 100%;
}

body{
    margin: 0px;
    padding: 0px;
    background-color: var(--color-background);
    min-height: 100%;
}

h1, h2 {
    color: var(--color-background)
}

header{
    padding: var(--padding-small);
    background-color: var(--color-header);    
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main{
    padding: 0;
    margin: 0;
    display: flex;    
/*     this part didn't work because you had  --height-footer variable in 'px' but you're subtracting it from 100vh which is in 'vh' units */
    min-height: calc(100vh-var(--height-footer)); //this doesn't work
    min-height: 100%; // neither does this

    justify-content: space-evenly;
    align-items: center;
}

#left-btn-group,
#right-btn-group{
    flex-basis: 20%;
    justify-content: center;
    align-items: center;
}

#left-btn-group button{
    display: block;
    width: 75%;
}

footer {
    padding: var(--padding-small);
    position: fixed;
    bottom: 0;
    height: var(--height-footer);
    min-height: var(--header-height);
    background-color: var(--color-header);
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

#canvas {
    width: 50vw;
    height: 50vh;
    display: flex;
    flex-wrap: wrap;
    border: 50px solid var(--color-padding);
    border-radius: 50px;
}

#canvas-border {
    width: 99%;
    height: 99%;
}
    <head>
    <title>Sketch-A-Etch</title>
    <script src="javascript.js" defer></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h1>
            Sketch-A-Etch
        </h1>
    </header>
    <div class="main">
        <div id="left-btn-group">
            <!-- 3 buttons for pixel size -->
            <button id="low">Low Resolution</button>
            <button id="medium">Medium Resolution</button>
            <button id="High">High Resolution</button>
            <button id="clear">Clear Canvas</button>
            <input type="color" id="color" value="#ff0000"> Color Picker</button>
            <!-- Buttons to add -->
        </div>
        <div id="canvas"></div>
        <div id="right-btn-group"></div>
    </div>
    <footer>
        <h2>
            Made by [Redacted]
        </h2>
    </foot

    I left some comments to help you in the code snippet. The height was not being calculated because of a unit problem. Footer height variable was in ‘px’ while being subtracted from 100vh. I hope this help you. Good luck!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search