0

This question How can I make my flexbox layout take 100% vertical space?. Is close to what I am looking to do but it does not address the footer at the bottom of the page. The question above handles how to make the main page take of the remaining space but it does not show how to remove the footer from that main div.

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>
Funlamb
  • 551
  • 7
  • 20

2 Answers2

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!

ThePaulin
  • 67
  • 3
  • This is wrong, `calc()` requires the same data type, not the same unit. That line failed because there are no spaces before and after the `-` operator. – haolt Jun 27 '23 at 03:17
0

I agree with @sajid that flex/grid is the better way to do this, just want to point out that this line min-height: calc(100vh-var(--height-footer)); doesn't work because you need spaces before and after + and - in calc(), not because of diffrent units. This works: min-height: calc(100vh - var(--height-footer));

haolt
  • 353
  • 1
  • 9