Sizes of Divs ( Width and Height ) with Relative and/or Absolute positions

Asked

Viewed 215 times

0

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

How can I use position relative, and what can I do with absolute ?

  • As section's cannot 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 positioning
  • 1

    I did not understand your doubt well, the content is going beyond the divide in which it contains the content or it is going beyond the main-content?

  • Doubt is how to do, in a way that does not surpass, and that others sections follow the flow without overlapping, ta written ...

  • exceed horizontally or vertically? you can put the data you are using to see how it looks?

  • obviously do not exceed horizontal :D

  • Ta everything there, is just an example to see how it can be done...

  • It’s not clear yet.

  • div has to occupy 100% of the height and width of the page, and cannot be overwritten or overwritten by others

  • huahuahua occupy 100% of the page as it cannot be overwritten by others?

  • the others are thrown just below

  • in the case is the height of the visible part of the page, occupying 100% of it and width

  • It’s too long, I took the answer. visit this page How to ask a good question? http://answall.com/help/how-to-ask

  • Make an image in photoshop or Paint illustrating how you need it to look, otherwise it becomes difficult to understand.

Show 7 more comments

1 answer

1


To prevent internal Ivs from leaking, try using *{box-sizing: border-box;} in the 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 with 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>
<div class="wrapper">
  Wrapper aqui
</div>

  • but and the height of 100% of the screen view ? :3

  • 1

    Edited ;) now try

Browser other questions tagged css positioning

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