HTML:
<div id="a">
<div id="b>
</div>
</div>
CSS:
html, body {
height: 100%;
background: red;
margin: 0;
}
#a {
min-height: 100%;
background: green;
}
#b {
min-height: 100%;
background: yellow;
}
What is the reason for the browser displaying green instead of yellow?
This particular combination is just not feasible.
The outer element has a minimum height, meaning its height depends on its content. If the content exceeds 100%, then the actual height of the outer element will be more than what the min-height specifies.
Now, you want the inner element to also have a min-height of 100% - this means the inner element needs to reference the outer element to determine its height, and vice versa for the outer element. This creates an unsolvable equation.
Therefore, you must explicitly set a height for the outer element: height:100%
UPDATE in response to your query:
Can you explain why @George's workaround is effective?
height:1px serves as an initial value for the equation.
By giving the inner element a definite starting height of 1px, the outer element can now calculate the minimum of (100%,
height-determined-by-height-of-child-element100% (of the parent's height, body), leading to a specific pixel value as the calculated result.
Subsequently, the min-height:100% for the inner element becomes applicable as well - since the outer element has an effective pixel value, it can calculate the minimum of (100% of that-pixel-value, 1px) resulting in the same pixel value as the outer element effectively has.
Swap out min-height with height
#a {
height: 100%;
background: green;
}
#b {
height: 100%;
background: yellow;
}
View the UPDATED DEMO
In order to ensure the child element inherits the height, it is necessary for the parent element to have a defined height. Simply add the height attribute to the parent element.
#parent {
height: 100%;
min-height: 100%;
background: green;
}
Perhaps adjusting the min-height in pixels could resolve the issue.
#c {
min-height: 300px;
background: green;
}
Take a look at the demo http://jsfiddle.net/xyqnhz37/9/
Specify the vertical dimension for element #b
#b {
height: 100px;
....
....
or
Set height to 100% for elements #a and #b
#a,#b{
height:100%;
....
....
#c
{
height:auto;
}
#d
{
height:auto;
min-height:300px;
}
Utilizing jQuery.get for AJAX requests, I trigger a server request when the user clicks on the <a> element. The response is then used to update the content within the <div id='aaa'>. However, if the user clicks on the <a> rapid ...
Currently, I am in the process of parsing text and looking to match a specific type of text that I want to remove entirely. The format of the text I am trying to target is as follows: <tr class="label-BGC"><td colspan="4">any content here</ ...
In my Angular blog, I have a root component with a navigation bar containing router links to create a single-page application. My goal is to darken the background around the link when the child component loads. Currently, the link highlights only when pres ...
Can anyone provide assistance with translating a square on the z axis in three.js? I would appreciate any examples or guidance on the best approach to achieve this. ...
Within my erb file, there exists a script that looks like the following: function checkJquery() { if(window.jQuery) { jQuery(document).ready(function() { alert('onready'); $('div#habla_topbar_div').click(function( ...
Check out this cool code snippet featuring an empty div tag (<div></div>): import groovy.xml.DOMBuilder import groovy.xml.XmlUtil def HTML_STRING = ''' <html> <div></div> <div>Some text</d ...
UPDATE: Can someone please assist me with maintaining the aspect ratio of a drawn image? I am struggling to achieve this and would appreciate any help. I have been attempting to upload an image, draw it using the imageDraw() function, and fit it within a ...
As a newcomer to angularfire2, I am currently working on implementing authentication and providing the user with feedback on their login status. I am using version angularfire2": "^5.0.0-rc.4. I came across an example on this site, but I am unsure of how i ...
I am currently working on creating my own image slider without relying on plugins. 1st inquiry : How can I achieve horizontal animation for the slider? 2nd inquiry : I want the images to cover both the height and width of their container while maintainin ...
I am trying to implement Bootstrap's pagination feature into my project. While I was able to find the HTML code for it on the official Bootstrap page, I am struggling to make the content change dynamically when I move to the next page. Can anyone pro ...
My Vue data consists of: data: function() { return { results: { "items": [ { "id": "770c257b-7ded-437c-99b5-3b8953b5be3a", "name": "Gsbssbb", "price": 9559, "colour": { ...
I am brand new to Angular and I'm attempting to implement Form Validation within a SwitchCase scenario. In the SwitchCase 0, there is a form that I want to submit while simultaneously transitioning the view to SwitchCase 1. The Form Validation is fun ...
Thank you for your interest. I am looking to retrieve $_POST['Division'] from a dropdown list: <select name="Division" onchange="setImage2(this);"> <option value="1">Bronze</option> <option value="2">Silver</op ...
My goal is to populate a table dynamically using the code below: teams.component.ts import { Component, OnInit } from '@angular/core'; import { first } from 'rxjs/operators'; import { TeamService } from 'src/app/services/team.ser ...
I'm in the process of creating a table with subcategories and headers that resembles the image provided below: Here's what I've come up with so far: <table> <thead> <tr> <th>Item</th> & ...
I am looking for a way to divide an image into separate "portions" without having to load the image multiple times to save bandwidth. In this case, I want to split the image into 4 quadrants, but ideally, I would like a scalable solution. It's import ...
I have a straightforward requirement: I need a list <ul /> containing items <div />s of the same fixed size. These items should be displayed from left to right, filling up all available space before wrapping onto the next line. Below is the ba ...
Explanation: I am currently in the process of deploying a LibGDX GWT application to the browser. Challenge: In the image below, you can see the top left portion of my GWT application showcased by the large black rectangle. The issue here is the unwanted ...
Is there a way to create horizontal columns with inline-blocks, like the method described here, without having vertical gaps between items on the second line due to different heights? I want to eliminate the vertical gaps between the tiles using only CSS. ...
Looking to extract specific HTML content from the response received from an ajax call made to the controller. This task will involve utilizing an ID reference. I am encountering difficulty in employing the find function directly on the data as it is curre ...