Divide the entire screen

Question

Divide the entire screen

Navigation

#1 by (1 votes)

1

I'm creating a home and want to position a div (with a background image) across the visible screen when the page loads. I did this:

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

It works perfectly, but the problem is that there is still content to be shown below, and that content overlaps that div, since it has absolute position. I already thought of creating a relative and put the absolute inside, but how would I leave the relative top: 0 and bottom: 0?

Image with height:100%; and position: relative; . OBS: body and html with height: 100% also. The site is all bugged as I am reforming it yet ...

css

asked by anonymous 21.07.2016 / 17:34

1 answer

Validation input via HTML does not work Does not return all xml results

score 1 · Accepted Answer

If you set a height: 100% to html and body , you can set a height: 100% to its div.home-entrada without setting 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>