Height 100% Definitely NOT working

Question

Okay, so I have read through probably every answer to this and similar questions on this site and multiple others, but nothing seems to be working. I have a basic web page that has a map on it. I have been tasked with making the map full screen within the browser window, NOT full screen on the computer screen. Below is the snippet of code I am working with. I have my width set to 100% and that's working fine. I tried having my height set to 100% as well, but the map disappears off the page when that happens. I also tried setting the height to auto, but that gives me the same result as height 100%. Any suggestions on how this can be fixed?

<style>
    #map {
        width: 100%;
        min-height: 100%;
</style>

WHERE is your `}` ? And 100% of what? Have you set `body` to 100% — Roko C. Buljan, May 10 '18 at 20:03

score 0 · Answer 1 · answered May 10 '18 at 19:52

0

Try to put this style to the container div, not the map itself.

<div class="container">
  map here
</div>

<style>
    .container {
        width: 100%;
        min-height: 100%;
</style>

answered May 10 '18 at 19:52

Guim

628
2
12
26

score 0 · Answer 2 · answered May 10 '18 at 19:57

0

You should try define height value for map tag. For exaple: Your map code in iframe tags, you should define height value for iframe tag.

answered May 10 '18 at 19:57

user367452

1
1

Okay, I am very new to this. I think I understand how the iframe tag works, but where does the source come from? – JadeHarley May 10 '18 at 20:05
and you should set height value 100% for container. – user367452 May 10 '18 at 21:25

score 0 · Answer 3 · answered May 10 '18 at 20:02

0

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set DIV Height to 100% Using CSS</title>
<style type="text/css">
    html, body {
        height: 100%;
        margin: 0px;
    }
    .container {
        height: 100%;
        background: red;
    }
</style>
</head>
<body>
    <div class="container">The height of this DIV element is equal to the 100% height of its parent element's height.</div>
</body>
</html>

answered May 10 '18 at 20:02

Abdul Moeed

11
3

Could you add explanations what is happening here? – Roi Danton May 10 '18 at 20:10

score 0 · Answer 4 · answered May 10 '18 at 20:04

0

For making a container consume the entire screen, I prefer using

.container {
    height: 100vh;
}

answered May 10 '18 at 20:04

Brian Hollingsworth

11
1
2
4

score 0 · Answer 5 · answered May 10 '18 at 20:04

0

height: 100% means element take all height of its parent container. Generally, you should use:

body, html {
 height: 100%;
}

.container {
  height: 100%;
}

answered May 10 '18 at 20:04

IP_

676
5
18

Height 100% Definitely NOT working

5 Answers5