Remove the height of a footer from another height of a div above

Asked

Viewed 28 times

0

Hello, how do I remove the height of a footer, from another height of a div above, explaining better: I have the div . Bigwell and want to remove to that div the height of the . tecData, to the div . Bigwell does not occupy 100% of height, and consequently the text "Cafeteria", stay centered on the screen.

            *{
                margin: 0;
                padding: 0;
            }
            body{
                background: #fc993e;
            }
            div.topMenu{
                color: #FFF;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 16px;
                display: flex;
                flex-direction: row;
            }
            .pgetitle{
                width: 100%;
                padding: 10px;
                user-select: none;
            }
            .closebtn{
                padding: 10px;
                cursor: pointer;
                user-select: none;
            }
            div.bigWell{
                display: flex;
                flex-direction: row;
                height: 100%;
                justify-content: center;
                color: #FFF;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 40px;
            }
            div.bigWell p{
                align-self: center;
            }
            div.tecData{
                color: #FFF;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 16px;
                display: flex;
                position: absolute;
                width: 100%;
                bottom: 0;
                flex-direction: row;
            }
            .status{
                width: 100%;
                padding: 10px;
                user-select: none;
            }
            .modVersion{
                padding: 10px;
                user-select: none;
            }
            div.boxLoad{
                display: flex;
                height: 100%;
                flex-direction: column;
            }
<html>
    <head>
        <title>Refeitorio - PGE</title>
    </head>
    <body>
        <div class="boxLoad">
            <div class="topMenu">
                <p class="pgetitle">PGE</p>
                <p class="closebtn">X</p>
            </div>
            <div class="bigWell">
                <p>Refeitorio</p>
            </div>
            <div class="tecData">
                <p class="status">A validar a licença...</p>
                <p class="modVersion">v1.0</p>
            </div>
        </div>
    </body>
</html>

html5 css3

1 answer

1


Dude you’re wearing flex, then forget it position: absolute, use the attributes of a flex container as justify or align.

So first remove this position of the latter div, then, in the div middle, you put flex: 1, and nay height: 100%. And finally, he puts this height: 100% in the html and in the body

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  html,
  body {
    height: 100%;
  }
  * {
    margin: 0;
    padding: 0;
  }

  body {
    background: #fc993e;
  }

  div.topMenu {
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    display: flex;
    flex-direction: row;
  }

  .pgetitle {
    width: 100%;
    padding: 10px;
    user-select: none;
  }

  .closebtn {
    padding: 10px;
    cursor: pointer;
    user-select: none;
  }

  div.bigWell {
    display: flex;
    flex-direction: row;
    /* height: 100%; */
    justify-content: center;
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 40px;

    flex: 1;
    background-color: green;
  }

  div.bigWell p {
    align-self: center;
  }

  div.tecData {
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    display: flex;
    /* position: absolute; */
    width: 100%;
    /* bottom: 0; */
    flex-direction: row;
  }

  .status {
    width: 100%;
    padding: 10px;
    user-select: none;
  }

  .modVersion {
    padding: 10px;
    user-select: none;
  }

  div.boxLoad {
    display: flex;
    height: 100%;
    flex-direction: column;
  }
</style>
</head>

<body>

  <div class="boxLoad">
    <div class="topMenu">
      <p class="pgetitle">PGE</p>
      <p class="closebtn">X</p>
    </div>
    <div class="bigWell">
      <p>Refeitorio</p>
    </div>
    <div class="tecData">
      <p class="status">A validar a licença...</p>
      <p class="modVersion">v1.0</p>
    </div>
  </div>


</body>

</html>

  • Thank you, the position: Absolute, it was a test I did, and it got lost in the code, and when I had to review why this problem went unnoticed me, 30 mins because of an extra position, by taking it out I solved the problem right away, and also solved the other 100% height issues for flex: 1

  • @I’m glad I could help

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.