Why is it so difficult to set the height of a div to 100%?

I am facing an issue with a fixed container that contains an absolute div. I am trying to set the height of the .absolute div to be 100% of the container div (which has a height of 500px). This is crucial for creating a mobile menu with a toggle container, and it needs to be the height of the mobile phone screen.

Check out my solution on JSFiddle

Here is the HTML structure:

<div class="container">
  <div class="fixed">
    <div class="absolute">

    </div>
  </div>
</div>

And the CSS styles:

.container{
  width:100%;
  height:500px;
  background-color:#ddd;
}
.fixed{
  position:fixed; 
  width:100%;
  height:50px;
  background-color:red;
  top:8px;
  left:8px;
  right:15px;
}
.absolute{
  position:absolute;
  height:100%;
  width:100%;
  background-color:green;
  top:51px;
  left:0px;
}
htmlcss

Answer №1

By setting the parent div .fixed to be absolutely positioned with a height of 50px, any child elements with height: 100% will inherit this relative height of 50px.

For the .absolute element, use height: 100vh; and adjust the height calculation to height: calc(100vh - 51px) to prevent any scrollbars due to the top: 51px placement.

Note: The unit vh represents 1/100th of the viewport height, ensuring responsive design.

View Updated Fiddle

.absolute {
  position: absolute;
  height: calc(100vh - 51px);
  width: 100%;
  background-color: green;
  top: 51px;
  left: 0px;
}

Answer №2

When using a Fixed div as the Parent div of an Absolute div, the Absolute div can take up 100% of the Fixed div's width, but it cannot automatically extend to match its parent's height if you specify a height value in percentage. To make the Absolute div extend to the height of its parent, you need to set the height in pixels.

.container{
  width:100%;
  height:500px;
  background-color:#ddd;
}
.fixed{
  position:fixed;
  width:100%;
  height: 101px;
  background-color:red;
  top:8px;
  left:8px;
  right:15px;
}
.absolute{
  position:absolute;
  height: 117px;
  width:100%;
  background-color:green;
  top: 0px !important;
  left:0px;
  z-index: 99999999;
  top: 50px;
}

Answer №3

Consider using the vh unit for setting height. Add the class .absolute with height = 100vh

 .absolute
 {
 position:absolute;
 height:100vh;
 width:100%;
 background-color:green;
 top:51px;
 left:0px;
}

https://jsfiddle.net/bj9wcdLs/

Answer №4

A more contemporary approach involves utilizing vh and vw (viewport height and width). These values represent a percentage of the full page rather than its parent (like %).

In the following example, calculations have been done to determine the necessary sizes for the elements.

example = function() {
  var abSel = document.querySelector(".absolute");
  abSel.classList.toggle('hidden');
}
body {
  margin: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  background-color: #ddd;
}
.fixed {
  position: fixed;
  width: calc(100vw - 16px);
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: red;
  top: 8px;
  left: 8px;
}
.absolute {
  position: absolute;
  border-top: 1px solid #ddd;
  height: calc(100vh - 59px);
  width: calc(100vw - 16px);
  background-color: green;
  top: 50px;
}
.hidden {
  display: none;
}
<div class="container">
  <div class="fixed">
    <button onclick="example()">Example</button>
    <div class="absolute hidden"></div>
  </div>
</div>

Trust this information proves useful.

Answer №5

As sticksu mentioned previously.

Make a modification to your existing code

.pinned{
   position:fixed; 
   width:100%;
   height:100%; //needs to be 100%
   background-color:blue;
   top:10px;
   left:5px;
   right:20px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to pass a variable using the href tag in jQuery?

for (var i in result) { $('#tgt').append( "<li><a href='/UpdateStatusData/?id='"+result[i]+" >"+result[i]+"</a></li>"); } I am facing an issue where the id is appearing blank when being extracted o ...

javascriptjqueryhtmlajax

Text Alignment in a Responsive Design

Is there a way to create a responsive container that automatically centers all items inside it on the page, regardless of the screen size? Thanks :) Images are not included in this code snippet, but here's the code: HTML <!DOCTYPE html> <h ...

htmlcss

jQuery Mobile Dialog Alert Box

Here's a code snippet that can be used to open a dialog box: <p><a href="ShopItems/Rotax125MicroMax.html" data-rel="dialog" data-role="button">Rotax 125 Micro Max</a></p> Next, we have a page whic ...

jqueryhtmljquery-mobile

Why doesn't the background color display properly when the div height is set to auto?

When I set the height of #container to auto, the background-color does not display. However, when I set it to a fixed height like 1000px, it shows up. I've attempted using "overflow:auto", but that did not solve the issue. How can I fix this? I want # ...

csshtmlheight

What is the best way to add flair to the HTML <title> tag?

Just a quick question - I'm wondering if there is a method to apply CSS styles to an HTML element. Here's an example declaration: title { color: red; font-family: 'Roboto', sans-serif; } ...

htmlcsstitle

Guide to making a slider menu using html, css, and javascript

Just dipping my toes into the world of web development. I'm intrigued by the idea of creating a "slider menu" where users can view and select options by clicking on next or previous buttons (see example image below). While I've got some basic HTM ...

javascripthtmlcss

Attempting to create a child process within the renderer by triggering it with a button click

I'm currently developing an electron application where I am attempting to initiate a child node process (specifically to run a Discord.JS bot). Below is the code snippet in question: index.html: <tr> <th class="title-bar-cell" ...

javascripthtmlnode.jselectron

Implementing CSS Media Print, tables elegantly transition to a fresh page

I am encountering a challenge when it comes to printing my dynamic table along with some preceding text. It seems that sometimes the table begins on a new page, resulting in the header test being isolated on the first page and only displaying the table on ...

htmlcssprinting

Proper techniques for enlarging a background image using CSS

When utilizing the CSS scale() function along with a transition and transform on a div element that contains a high-quality background image, I noticed that the image becomes blurry when zoomed in. How can I achieve a smoother zoom effect for high-quality ...

htmlcsszooming

Exceeded maximum file size event in Dropzone

I am currently implementing dropzone in my form to allow users to upload images. In the event that a user selects a file that exceeds the configured limit, I want to display an alert message and remove the file. Below is my current configuration: Dropzone ...

javascriptjqueryhtmldropzone.js

What is the best way to ensure a string of words in HTML/CSS wraps to the next line seamlessly?

As I work on creating my portfolio website using Bootstrap and custom CSS, I am running into an issue with the game titles breaking in the middle when displayed. Despite my limited proficiency in English, I tried searching for a solution without success. ...

javascripthtmlcssbootstrap-5

Modifying Bootstrap image dimensions

I've been working on creating a card div with two images inside: an up arrow and a down arrow. Everything looks good when the page is in full screen mode, with the images displaying at their full size. However, with Bootstrap's responsive design ...

htmlcssimagebootstrap-4

Is there a way to automatically scroll to the last dynamically added div?

Within the chat.html file, I have included a div tag and implemented a script that dynamically adds rows to the div when a button is clicked. In another file named list.html, I have inserted an iframe tag with the src attribute pointing to chat.html. Howev ...

javascriptjqueryhtmlcss

Tips for avoiding a large <ul> element from spilling over the body in a flexbox design

I struggled to articulate the problem I am facing, and I apologize if it's still unclear So, in my app, I have 3 cards, and the 2 side ones contain lists (<ul>) that can become quite lengthy. I want the scrollbar to appear on the <ul> its ...

htmlcssflexbox

Creating an adjustable fixed footer using Bootstrap 3

Struggling with the application of bootstrap styling. I have a footer with columns set as col-md-3, 3, 2, 4 which sums up to a total of 12. The issue lies in the differing content within each column. My goal is to achieve equal spacing between each div in ...

htmlcsstwitter-bootstrap

React JS issue with SVG linearGradient not displaying accurate values

Within my component, I am working with SVG paths and a linearGradient value passed down from the parent component through static data. The properties 'startColor' and 'stopColor' are used to define the gradient colors for each element. ...

javascriptcssreactjssvglinear-gradients

Problems with select tag change events

I encountered an issue with select tag onChange events. When I select a value from the select tag, it should display in a textbox that is declared in the script. It works perfectly when I remove the class "input" from the select tag, but I prefer not to re ...

javascriptjqueryhtmlcss

Retrieve an integer value from an HTML form

I need to extract an integer value from an HTML form using Python. Here is the code I tried: form = cgi.FieldStorage() if not form.has_key("id"): error_pop("There is no id in this form","The format of the request is not correct") id = ...

pythonhtml

Update the content retrieved through ajax periodically

Looking to set up a periodic update for this ajax fetch function, say every 10 seconds. I've tried a few approaches but none seem to work as expected. That's why I'm reaching out here for help. So, any idea how I can refresh the content ev ...

phpjqueryhtmlajax

Discrepancy in Angular Material Buttons with theme design

I recently installed Angular 10 along with Angular Materials using the command ng add @angular/material I opted for the custom theme: Purple/Green The next step was to add a Toolbar by simply copying and pasting code from Google's site. However, I a ...

cssangularangular-material