Divs of window size

Asked

Viewed 394 times

1

I have a map below a div. My problem is that when I add altura 100%, he takes the value of body, below the primeira div, appearing scroll.

Example: jsfiddle

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Directly accessing Street View data</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .conteudo{width: 100%; height:100%;}
    .um{width:100%; height:100px; background: red; float: left;}
    .mapa{width: 100%; height:100%; float:left; background: green;}
    </style>
  </head>
  <body>
       <div class="conteudo">
           <div class="um"></div>
           <div class="mapa"></div>
       <div>
  </body>
</html>

How do I not get this Scroll, I want the two Divs to be 100% relative to the window.

html css

  • I don’t understand what you want exactly ? You want the scroll not to appear?

  • @Magichat That’s right, the two Divs should show up in the window, without going beyond the body, with examples similar to those used below... ATT

  • If the answer is correct, could validate it, or any other adjustment comments, to adjust..

  • It is correct. I tried to look for other ways to do this, but so far I have not been able... ATT

  • It’s just that I don’t know exactly what you’re up to, it’s a lot of variants... But for example, if the div um is like a header you can put px at height and position:Fixed and the map at 100% height...but it will have tmb side effects... what exactly do you want?

  • As you mentioned above, I will have a div similar to a Header, and the other that should be below according to the window (Map). I will use it in an Iframe, so it automatically adjusts to the size of the Iframe that the person creates, without SCROLL. I used CALC, but I made a script with Jquery with Resize. My big claim was to leave only with css, but something that would work in any browser. ATT

  • then use Fixed...and at the time of iframe if it gives a padding or margin discounting the header...

  • I did the tests here... It worked with Fixed. It was a bit tricky to paddle and not generate scroll (box-Sizing: border-box;). But I believe it worked. ATT

  • There’s always a Gambi here and there,,,,

Show 4 more comments

1 answer

1


What happens is this:

You are defining the div mapa, with height:100%, but you have more 100pxin div um, then your content will have 100% + 100px height. And when the content height exceeds the window height the browser triggers the scroll.

There are several solutions I will pass 2.

1- Set both heights with percentage.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Directly accessing Street View data</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .conteudo{width: 100%; height:100%;}
    .um{width:100%; height:25%; background: red; float: left;}
    .mapa{width: 100%; height:75%; float:left; background: green;}
    </style>
  </head>
  <body>
       <div class="conteudo">
           <div class="um"></div>
           <div class="mapa"></div>
       <div>
  </body>
</html>

2- Define the first height with px and the second with the spare.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Directly accessing Street View data</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .conteudo{width: 100%; height:100%;}
    .um{width:100%; height:100px; background: red; float: left;}
    .mapa{width: 100%; height: calc(100% - (100px)); float:left; background: green;}
    </style>
  </head>
  <body>
       <div class="conteudo">
           <div class="um"></div>
           <div class="mapa"></div>
       <div>
  </body>
</html>

Remembering that whenever the content of body is larger than the window will fire the scroll. And you can still use overflow: hidden, to hide the difference. Any doubt comments that adjusts agent.

  • Great tips. I knew both, but the first will not suit me, because in my case, I will have to use PX. The second is a good option, but I’m afraid to use it because it’s not compatible with browsers. I believe that with Transition you can do it too, but is there any way that it is compatible with all browsers? using position with negative margin-top, such as modal windows... I don’t know, know something more compatible? I still get the CALC... ATT

Browser other questions tagged html css

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