Html - Excess space on div element

ImAWeeb
August 3, 2023
114 views
0 votes
2 Answers

So I had this excess space on div element containing my button. And for some reason there is this excess space in the bottom.

It seems like my display flex is doing it? Im not entirely sure. If the flex thing doing it, how do I solve it? should I remove the flex?

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  width: 100vw;
  height: 100vh;
}

div#Calculator {
  width: 320px;
  height: 620px;
  display: flex;
  flex-flow: column wrap;
}

div#inputs {
  width: 100%;
  height: 15%;
}

div#inputs #inputVal {
  width: 100%;
  height: 100%;
}

div#buttons {
  height: 80%;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

div#buttons div button {
  padding: 28px;
  margin: 5px;
}

<div id="Calculator">
  <div id="inputs">
    <input id="inputVal" value="">
  </div>

  <div id="buttons">
    <div> <button class="operators"> + </button> </div>
    <div> <button class="operators"> - </button> </div>
    <div> <button class="operators"> x </button> </div>
    <div> <button class="operators"> ÷ </tton> </div>
    <div> <button id="erase"> C </button> </div>
    <div> <button class="numbers"> 1 </button> </div>
    <div> <button class="numbers"> 2 </button> </div>
    <div> <button class="numbers"> 3 </button> </div>
    <div> <button class="numbers"> 4 </button> </div>
    <div> <button class="numbers"> 5 </button> </div>
    <div> <button class="numbers"> 6 </button> </div>
    <div> <button class="numbers"> 7 </button> </div>
    <div> <button class="numbers"> 8 </button> </div>
    <div> <button class="numbers"> 9 </button> </div>
    <div> <button class="numbers"> 0 </button> </div>
    <div> <button id="equal"> = </button> </div>
  </div>
</div>

I already saw similar questions and tried the solutions of it and none of them seems to work like setting the padding and margin to 0 which I always do or setting the button on display block.

Please pardon me if this kind of question has been answered here already.

Tags: css html

Answers

div#Calculator {
  width: 320px;
  height: 620px;
  display: flex;
  flex-flow: column wrap;
}

div#inputs {
  width: 100%;
  height: auto; /* Adjusted height */
}

div#buttons {
  height: auto; /* Adjusted height */
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
}

div#buttons div button {
  padding: 28px;
  margin: 5px;
}

Hi,

this excess space come truly from flex, but it is a normal behaviour of it.

What is the problem?

Your div Calculator has a constant height and Your inputs container has 80% of its height. All of your inputs need less height as this 80%, so that what is to much is simple as empty space which is a normal thing with display flex.

Solution

Edit: added second solution

I don’t know Your exact intention, so I propose 2 solutions.

You can e.g. not setting the container div Calculator constant height what give You that Your calculator will have height of the whole content, but You must then set const inputs height.
Not setting the buttons height. That let the inputs have its 20% height of container and the rest of calculator will be fine expect the container which will take much more space than needed (or it is Your intention to have this 620px).

Below is an updated snippet of your code with 1. solution.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Simple Calculator </title>
    <!-- <link rel="stylesheet" type="text/css" href="Calculator.css"/> -->
</head>
<body>
    <style type="text/css">
        * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    }


    body {
        width: 100vw;
        height: 100vh;
    }

    div#Calculator {
        width: 320px;
        display: flex;
        flex-flow: column wrap; 
    }

    div#inputs {
        width: 100%;    
        height: 15%;
    }

    div#inputs #inputVal {
        width: 100%;
        height: 100%;
    }

    div#buttons {
        height: 80%;
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    }

    div#buttons div button {
        padding: 28px;
        margin: 5px;
    }
    </style>

    <div id="Calculator">
        <div id="inputs">
            <input id="inputVal" value="">
        </div>  

        <div id="buttons">
            <div> <button class="operators"> + </button> </div>
            <div> <button class="operators"> - </button> </div>
            <div> <button class="operators"> x </button> </div>
            <div> <button class="operators"> ÷ </tton> </div>
            <div> <button id="erase"> C </button> </div>
            <div> <button class="numbers"> 1 </button> </div>
            <div> <button class="numbers"> 2 </button> </div>
            <div> <button class="numbers"> 3 </button> </div>
            <div> <button class="numbers"> 4 </button> </div>
            <div> <button class="numbers"> 5 </button> </div>
            <div> <button class="numbers"> 6 </button> </div>
            <div> <button class="numbers"> 7 </button> </div>
            <div> <button class="numbers"> 8 </button> </div>
            <div> <button class="numbers"> 9 </button> </div>
            <div> <button class="numbers"> 0 </button> </div>
            <div> <button id="equal"> = </button> </div>
        </div>

    </div>




<script type="text/javascript" src="Calculator.js"> </script>
</body>
</html>

Here below is an updated snippet of your code with 2. solution.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Simple Calculator </title>
    <!-- <link rel="stylesheet" type="text/css" href="Calculator.css"/> -->
</head>
<body>
    <style type="text/css">
        * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    }


    body {
        width: 100vw;
        height: 100vh;
    }

    div#Calculator {
        width: 320px;
        height: 620px;
        display: flex;
        flex-flow: column wrap; 
    }

    div#inputs {
        width: 100%;    
        height: 15%;
    }

    div#inputs #inputVal {
        width: 100%;
        height: 100%;
    }

    div#buttons {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    }

    div#buttons div button {
        padding: 28px;
        margin: 5px;
    }
    </style>

    <div id="Calculator">
        <div id="inputs">
            <input id="inputVal" value="">
        </div>  

        <div id="buttons">
            <div> <button class="operators"> + </button> </div>
            <div> <button class="operators"> - </button> </div>
            <div> <button class="operators"> x </button> </div>
            <div> <button class="operators"> ÷ </tton> </div>
            <div> <button id="erase"> C </button> </div>
            <div> <button class="numbers"> 1 </button> </div>
            <div> <button class="numbers"> 2 </button> </div>
            <div> <button class="numbers"> 3 </button> </div>
            <div> <button class="numbers"> 4 </button> </div>
            <div> <button class="numbers"> 5 </button> </div>
            <div> <button class="numbers"> 6 </button> </div>
            <div> <button class="numbers"> 7 </button> </div>
            <div> <button class="numbers"> 8 </button> </div>
            <div> <button class="numbers"> 9 </button> </div>
            <div> <button class="numbers"> 0 </button> </div>
            <div> <button id="equal"> = </button> </div>
        </div>

    </div>




<script type="text/javascript" src="Calculator.js"> </script>
</body>
</html>

Cheers

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Excess space on div element

Answers

What is the problem?

Solution