1

Estou criando uma home e quero posicionar uma div (com uma imagem de background) em toda a tela visível quando a página carregar. Fiz da seguinte forma:

.home-entrada{
    position: absolute;
    bottom: 0;
    top: 0;
    width: 100%;
}

Funciona perfeitamente, mas o problema é que ainda existe conteúdo a ser mostrado abaixo, e esse conteúdo fica sobrepondo essa div, já que ela tem position absolute. Já pensei em criar uma relative e colocar a absolute dentro, mas como ia deixar a relative top: 0 e bottom: 0?

Imagem com o height:100%; e position: relative;. OBS: body e html com height: 100% também. O site está todo bugado assim pois estou reformando ele ainda...

4
  • talvez falte: height:100%, retire o bottom:0 e coloque left:0
    – Miguel
    Commented 21/07/2016 às 15:35
  • Já tentei height: 100%; continua sobrepondo. OBS: o conteúdo que vem abaixo está numa div position: relative;
    – Artur
    Commented 21/07/2016 às 15:38
  • experimente z-index:9999999;
    – Miguel
    Commented 21/07/2016 às 15:40
  • Não é isso, quero que o conteúdo vá para baixo, e não que suma atrás da div haha. Além disso, tem uma nav no topo também, não tem como....
    – Artur
    Commented 21/07/2016 às 15:41

1 Resposta 1

1

se você definir um height: 100% para o html e body, você poderá definir um height: 100% para a sua div.home-entrada sem precisar definir um position: absolute.

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

#capa {
  width: 100%;
  height: 100%;
}

#capa {
  position: relative;
  background-color: royalblue;
  margin-bottom: 5px;
  box-shadow: 0px 0px 5px black;
}

#icon {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 196px;
  width: 196px;
}

#icon rect, #icon path {
  fill: white;
}
<div id="capa">
  <svg id="icon" version="1.1" x="0px" y="0px" width="438.53px" height="438.529px" viewBox="0 0 438.53 438.529" style="enable-background:new 0 0 438.53 438.529;" xml:space="preserve">
      <rect x="42.532" y="191.573" width="353.458" height="72.803"/>
      <path d="
               M42.529,284.648v18.843c0,16.173,5.474,29.93,16.418,41.251c10.944,11.32,24.128,16.987,39.543,16.987h151.039v76.8    
               l74.227-76.8h16.282c15.414,0,28.603-5.66,39.547-16.987C390.529,333.421,396,319.664,396,303.491v-18.843H42.529z
               "/>
      <rect x="42.532" y="97.927" width="353.458" height="72.802"/>
      <path d="
               M395.991,57.956c0-15.988-5.469-29.643-16.413-40.968S355.448,0,340.031,0H98.493C83.078,0,69.894,5.662,58.95,16.988    
               S42.532,41.971,42.532,57.956v19.126h353.458V57.956z
               "/>
  </svg>
</div>
<div id="lipsum">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum nisl blandit condimentum porta. Nulla facilisi. Proin finibus vitae diam et blandit. Curabitur ut suscipit ante, at sollicitudin neque. Etiam dignissim auctor lectus non luctus. Donec tempor mauris lorem, a porttitor elit cursus in. Suspendisse aliquet faucibus quam, vel vulputate velit. Ut sit amet molestie urna. Donec laoreet dolor at ullamcorper consectetur. Vivamus consectetur tortor eu elit lacinia sagittis.
  </p>
  <p>
    Ut interdum, turpis nec eleifend varius, nibh neque suscipit massa, nec ornare elit sem ac augue. Mauris id urna fringilla, aliquet urna quis, varius justo. Phasellus vulputate tellus sed lorem sodales iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus porta, nunc molestie congue viverra, velit lectus vulputate diam, id fringilla dui mauris molestie leo. Sed sed placerat ante. Ut tincidunt odio et urna pretium eleifend. Phasellus tempor sagittis eros eu pellentesque. Sed mollis dapibus est. Vestibulum mattis turpis neque, eget ullamcorper nibh dictum sit amet. Integer quis arcu molestie, suscipit purus ut, vulputate ex. Praesent eu pretium urna, non blandit est.
  </p>
  <p>
    Vivamus suscipit maximus sollicitudin. In congue aliquam sem, non rhoncus orci commodo scelerisque. Sed ac velit auctor, porta libero id, convallis ante. Maecenas non mollis nisl. Vestibulum tristique magna a dolor elementum ultricies. Cras tellus tellus, finibus vel semper a, sagittis efficitur metus. Vestibulum pretium, leo sit amet volutpat feugiat, est turpis tincidunt tortor, eget mollis quam nulla eget ante. Donec et imperdiet ipsum. Fusce sed quam sit amet lorem tincidunt bibendum eget eget sem. Suspendisse leo augue, suscipit eu posuere non, imperdiet sit amet erat. In sit amet convallis velit. Donec dui leo, fringilla non dignissim id, vestibulum nec tellus.
  </p>
  <p>
    Vivamus bibendum metus ut erat tincidunt pulvinar. Proin lectus libero, bibendum iaculis dolor sed, sagittis iaculis elit. Nulla sit amet commodo lorem. Sed eget vehicula orci, non pulvinar magna. Nam malesuada ullamcorper nunc, eu tincidunt augue gravida non. Vestibulum quis diam ipsum. Ut sem eros, auctor ac libero at, viverra aliquam nisl. Mauris ultrices leo vitae dolor euismod malesuada. Sed eget tellus enim. Vivamus sodales commodo dapibus. Aliquam massa diam, placerat eget gravida sit amet, lacinia quis turpis. Donec a accumsan massa. Curabitur fringilla risus vel viverra feugiat. Nunc nunc ex, congue et fringilla nec, euismod eget nulla. Aenean tempus vehicula eros, at feugiat lorem viverra sed.
  </p>
  <p>
    Nam finibus purus tellus, sit amet dictum turpis consectetur sit amet. Ut rhoncus odio quis mollis sagittis. Cras venenatis ante a quam interdum malesuada. Aenean facilisis auctor arcu ut congue. Etiam lacinia, diam vel blandit bibendum, lorem mi suscipit dui, a dignissim ex mauris a sapien. Curabitur ut varius quam, a sodales risus. Nunc iaculis dui non lorem ullamcorper pellentesque. Phasellus nec blandit ligula. Quisque pellentesque lobortis est. Nam feugiat efficitur turpis, aliquam congue quam viverra nec. Nulla ornare at metus vitae commodo.
  </p>
</div>

6
  • Que masas nunca havia conseguido isso, mas é porque eu não colocava o height 100% no body e html. Commented 21/07/2016 às 15:50
  • Eu fiz exatamente assim, mas não funcionou:
    – Artur
    Commented 21/07/2016 às 16:03
  • @Insanity qual o erro que está dando, ou oque está acontecendo seguindo a solução do @TobyMosque?
    – MagicHat
    Commented 21/07/2016 às 16:07
  • 1
    @Insanity lembrando que o height: 100% é em relação ao parentElement, a tecnica acima funciona por que o html e o body tem height: 100% e a div.capa está diretamente dentro do body. Commented 21/07/2016 às 16:12
  • 1
    Funcionou, tinha uma div chamada all dentro de um include (da navegation) haha, e eu não tinha visto. É um site antigo qe eu fiz, agora to fazendo manutenção. Tem muito que ser organizado ainda haha... Valeu!
    – Artur
    Commented 21/07/2016 às 16:19

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 .