The map fills the entire vertical space of the page

Question

The map fills the entire vertical space of the page

I'm striving to make my map occupy the entire height of the page, while still staying beneath the navigation bar.

The screenshot below shows what I'm aiming for. How can I achieve this so that regardless of the device, it always fills the full height of the page?

Currently, I am setting the height manually, but is there a specific class that can help me achieve this?

HTML

<div class="column right">
            <div id="map"></div>
        </div>
    </div>

CSS

#map {
   width: 100%;
   float: right;
   height: 600px; 
}


.column {
   padding: 10px;
 }
 
 .left {
   width: 55%;
   padding-left: 50px;
   float:left
 }

 .right {
   width: 45%;
   float: right;

 }

https://i.sstatic.net/a4ems.png

html css

Answer 1

Answer №1

To adjust the height of your viewport excluding the header, you can use height: 100vh and subtract the height of the header like this:

height: calc(100vh - 50px); if your header is 50px in height.

* {
  margin:0;
  box-sizing: border-box;
}

.navigation  {
  width: 100%;
  height: 50px;
  background-color: grey;
}

#map {
   width: 100%;
   float: right;
   height: calc(100vh - 50px);
   background-color: red;
}

 
 .left {
   width: 55%;
   padding-left: 50px;
   float:left
 }

 .right {
   width: 45%;
   float: right;

 }

<div class="navigation">navigation / logo</div>
<div class="column right">
  <div id="map"></div>
</div>

If you want the map to take up the full height with the navigation above it, consider adding position: absolute to the logo bar and setting the map to height: 100vh

* {
  margin:0;
  box-sizing: border-box;
}

.navigation  {
  width: 100%;
  height: 50px;
  background-color: rgba(0,0,0,0.5);
  
  position: absolute;
  top: 0;
  left: 0;
}

#map {
   width: 100%;
   float: right;
   height: 100vh;
   background-color: red;
}

 
 .left {
   width: 55%;
   padding-left: 50px;
   float:left
 }

 .right {
   width: 45%;
   float: right;

 }

<div class="navigation">navigation / logo</div>
<div class="column right">
  <div id="map"></div>
</div>

Answer 2

To adjust the height of your viewport excluding the header, you can use height: 100vh and subtract the height of the header like this:

height: calc(100vh - 50px); if your header is 50px in height.

* {
  margin:0;
  box-sizing: border-box;
}

.navigation  {
  width: 100%;
  height: 50px;
  background-color: grey;
}

#map {
   width: 100%;
   float: right;
   height: calc(100vh - 50px);
   background-color: red;
}

 
 .left {
   width: 55%;
   padding-left: 50px;
   float:left
 }

 .right {
   width: 45%;
   float: right;

 }

<div class="navigation">navigation / logo</div>
<div class="column right">
  <div id="map"></div>
</div>

If you want the map to take up the full height with the navigation above it, consider adding position: absolute to the logo bar and setting the map to height: 100vh

* {
  margin:0;
  box-sizing: border-box;
}

.navigation  {
  width: 100%;
  height: 50px;
  background-color: rgba(0,0,0,0.5);
  
  position: absolute;
  top: 0;
  left: 0;
}

#map {
   width: 100%;
   float: right;
   height: 100vh;
   background-color: red;
}

 
 .left {
   width: 55%;
   padding-left: 50px;
   float:left
 }

 .right {
   width: 45%;
   float: right;

 }

<div class="navigation">navigation / logo</div>
<div class="column right">
  <div id="map"></div>
</div>

The map fills the entire vertical space of the page

Answer №1

Similar questions

Ways to shift footer lower if there is a floating element in the div above it

The overlay is larger in size compared to the video positioned beneath it

paragraph containing various divs

Dawn Break Alarm Timepiece - Online Platform

"Looking to add some flair to your website with a

Exploring the world of flexbox and experimenting with implementing flex-wrap at a specific breakpoint

Ways to incorporate dropdown menus using Bootstrap

Ensuring the correct width for a .png image in an email newsletter for Outlook 2013

Dynamic list choices determined by prior selections

How can Material UI React handle long strings in menu text wrapping for both mobile and desktop devices?

Update a Div, Table, or TR element without the need for a page reload or Ajax usage

Do we always need to use eval() when parsing JSON objects?

What are some creative ways to customize the background of a full component?

Compatibility of image maps with browsers and the usage of imagemapster

The expand/collapse feature is limited to the initial item

How to implement hover effects using CSS classes for mouse enter and mouse leave functionality

The styling of section and small elements appears differently in Internet Explorer compared to Chrome

What is the best way to restrict the number of iterations in ngFor within Angular HTML

Components are colliding with one another in the realm of Bootstrap 5

<p> The box is massive, and its size is a mystery to me