Div positioning

Question

Div positioning

Navigation

#1 by (1 votes)

0

I'm trying to make a joke with css and html5 of this type.

It'sjustthatit'scausingseveralproblemsbecause

%main%isnotoccupyingthefullheightandwidthofthepage.

Thepositioningofdiv(content)appearstobeinthemiddlebutwhenitgoestolargerscreensthisdoesnothappen.Code

* {
  margin: 0px;
  padding: 0px;
}
body {
  background-color: #FF0000;
}
#centro {
  position: relative;
  margin-top: 20%;
  margin-bottom: 15%;
  width: 100%;
  height: 200px;
  margin-right: 0;
  margin-left: 0;
  background: rgba(255,255,255,0.3);
  box-sizing: border-box;
}
section p {
  padding: 10px;
  font-family: Comic Sans MS;
  font-size: 40px;
  width: 100%;
  height: 80%;
  box-sizing: border-box;
  text-align: center;
}
footer {
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
}
#content {
  width: 100%;
  height: 100%;
  border: 2px solid #8AC007;
  box-sizing: border-box;
}

<div id="content">
  <section id="centro">
    <p>
      Teste
    </p>
  </section>
  <footer>
    Teste
  </footer>
</div>

Thank you.

html5 css3

asked by anonymous 25.09.2015 / 17:44

1 answer

Problems connecting to PostgreSQL (ghost URL) Difference between operating system and mobile platform

score 1 · Accepted Answer

Friend, in order to centralize the div (central) on the page, you will have to apply position: absolute to it, so necessarily div (content) can not have a position: static , in this case you have to work with relative absolute or fixed

To make div (central) occupy the entire page, then you should make html and body also occupy the whole page, after all height: 100% is relative to parent element size.

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#content {
  background-color: gainsboro;
  width: 100%;
  height: 100%;
}

#central {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: 120px;
  margin: auto;
  background-color: white;
  box-shadow: 0px 0px 10px black;
}

#central p {
  margin: 0px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  font-weight: bold;
  font-size: 36px;
}

footer {
  position: absolute;
  text-align: center;
  width: 100%;  
  bottom: 0px;
}

<div id="content">
  <div id="central">
    <p>Texto</p>
  </div>
  <footer>
    Texto
  </footer>
</div>

The trick to center div(central) is to anchor it at the top and end, for this you will need top: 0px and bottom: 0px , but when doing this and leaving height: auto , div(central) will occupy all the space of div(content) , an effect similar to a height: 100% , then if we specify a height and we set margin: auto , the margins will grow to the position of top: 0px and bottom: 0px ; p>