Width and Height sizes with Relative and / or Absolute positions

Question

Width and Height sizes with Relative and / or Absolute positions

Navigation

#1 by (1 votes)

0

I'm having problems positioning items ( div 's), in this case, I need the first div , occupy the entire height and width of the screen, while the others occupy only the padding they receive and the size of the content from within (without leaking content if it is larger, such as text).

How can I do it using position relative , and how can I do with absolute ?

section 's can not overlap

.main-content{
  width:100%;
  display:flex;
  flex-direction:column;
  padding:6px 0;
}
.section{
  position:relative;
  float:left;
  padding:6px;
  width:100%;
}

<div class="main-content">
  <div class="section banner"></div>
  <div class="section"></div>
  <div class="section"></div>
</div>

css posicionamento

asked by anonymous 03.03.2017 / 13:51

1 answer

Constructor method to calculate age How to read string from a specific word?

score 1 · Accepted Answer

To prevent internal divs from leaking, try using *{box-sizing: border-box;} in CSS

* {
  box-sizing: border-box;
}
.main-content{
  width:100%;
  display:flex;
  flex-direction:column;
  padding:6px 0;
  background-color: red;
}
.section{
  position:relative;
  float:left;
  padding:6px;
  width:100%;
}
.section:nth-child(1) {
  background-color: blue;
}
.section:nth-child(2) {
  background-color: yellow;
}
.section:nth-child(3) {
  background-color: green;
}

<div class="main-content">
    <div class="section banner"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

And to keep the element at 100% height, try jQuery

$(window).bind("load resize", function() {
	// Será executado quando o documento carregar
  //ou quando o usuário redimensionar a tela (zoom)

  // Caso utilize Navbar, dar o valor de sua altura + margem
  // Exemplo: Navbar possui 30px de largura + 10px de margin-bottom
  // topOffset = 40;
	topOffset = 0;
	height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height);
  
  // \/ Altura da página - valor da Navbar (topOffset)
	height = height - topOffset;
	if (height < 1) height = 1;
	if (height > topOffset) {
		$(".wrapper").css("min-height", (height) + "px");
    // /\ Elemento alvo
	}
});

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background-color: red;
}

.wrapper {
  padding: 8px 4px;
  background-color: #fff;
  max-height: 35px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><divclass="wrapper">
  Wrapper aqui
</div>