Window size divs

Question

Window size divs

Navigation

#1 by (1 votes)

1

I have a map below a div . My problem is that when I add altura 100% , it takes the value of body , lower than primeira div , 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

asked by anonymous 16.07.2016 / 00:47

1 answer

Problems with calculations with jquery.maskMoney How do I get the response of an HTTP GET using HttpURLConnection java.net?

score 1 · Accepted Answer

What happens is as follows:

You are setting div mapa , with height:100% , however you have 100px in div um , so its contents will have 100% + 100px at that time. And when the height of the content exceeds the height of the window the browser fires 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 second with leftover.

<!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 contents of body is greater than the window will fire scroll . And you can still use overflow: hidden to hide the difference. Any questions, please comment on which agent adjusts.