0

Estou tendo problemas ao posicionar items (div's), no caso, preciso que a primeira div, ocupe toda a altura e largura da tela, já as demais, ocupem apenas o padding que recebem e o tamanho do conteúdo de dentro dela (sem vazar conteúdo caso o mesmo seja maior, como por exemplo texto).

Como posso fazer usando position relative, e como posso fazer com absolute ?

  • As section's não podem se sobrepor

.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>

12
  • 1
    não entendi bem sua duvida, o conteúdo esta ultrapassando a div em que contem o conteudo ou esta ultrapassando o main-content?
    – RFL
    Commented 3/03/2017 às 13:11
  • A dúvida é como fazer, de forma que não ultrapasse, e que os outros sections sigam o fluxo sem se sobrepor, ta escrito ... Commented 3/03/2017 às 13:21
  • ultrapassar na horizontal ou na vertical? você pode colocar os dados que esta usando para ver como fica?
    – RFL
    Commented 3/03/2017 às 13:47
  • não ultrapassar na horizontal obviamente :D Commented 3/03/2017 às 14:00
  • Ta tudo ai, é apenas um exemplo pra ver como pode ser feito... Commented 3/03/2017 às 14:00

1 Resposta 1

1

Pra fazer com que as divs internas não vazem, tente utilizar *{box-sizing: border-box;} no 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>

E para manter o elemento com altura 100%, tente com 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>

2
  • mas e o height de 100% da visualização da tela ? :3 Commented 5/03/2017 às 14:23
  • 1
    Editado ;) tenta agora Commented 7/03/2017 às 16:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .