Use screen size in 100%

Asked

Viewed 382 times

0

I have two Ivs,

DIV 1 is 80% wide, centralized and I have DIV 2 that is within DIV 1, which I want to be 100% wide, but since it is within DIV 1 that is 80%, then 100% becomes 100% of DIV 1 (turning 80%). But I want DIV 2 to have 100% of the width of the screen, even inside DIV 1, has how to do this?

<div class="1"> <!--TEM 80%-->
<div class="2"></div><!--TEM 100%, ou seja, pega o total da DIV1, mas quero que seja 100% da TELA TODA---->
</div>

inserir a descrição da imagem aqui

html css
  • 1

    try to use width:100vw; that will take the total size of the screen, in case you want to reduce some value just use width:calc(100vw - 20px);

  • Thanks William, it was supposed to work, but not the, as my print, it ignores looks the position Absolut and starts counting the screen from the div and not the screen.

  • 1

    Remembering that I didn’t use % and yes vw. Second, do you have any position:relative before this div?

  • I thought so, William, but there was another in the father div!

1 answer

2


Just add the property position: absolute; in <div class="2">, follows an example snippet:

#div1 {
  width: 80%;
  border: 1px solid green;
  height: 20px;
}

#div2 {
  width: 100%;
  border: 1px solid red;
  height: 20px;
  position: absolute;
}
<div id="div1">
  <div id="div2">
  </div>
</div>

  • So I was doing this, trying, but even with the Absolut position on my site does not work, it gets 100% the size of the div 1 and not the whole screen, I don’t know why.

  • Strange, try to put a snippet that reproduces this problem here in the question, then maybe I edit my answer p/ help you better.

  • Look at print Mathias, I can not play in snippet 100% because it is a bit big, see if with print can understand.

  • Got it, @Lucascarvalho tries to take a look if any parent element is with position:relative; this can prevent the element from getting width:100%;.

  • The Father is also with position Absolut, then removed to test and Té worked, but then disfigures the father. I’ll have to think of a way...

Browser other questions tagged html css

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