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;
}
Is there a way to prevent the input field from jumping out of alignment when an option is selected in these q-select inputs? I want to fix this issue so that the field remains in line with the horizontal alignment. https://codepen.io/kiggs1881/pen/RwENYEX ...
I need to hide the 'div .blind' element when a YouTube video (inside 'div #player') is clicked. How can I achieve this? Here's an example: JS: ... var player; function onYouTubeIframeAPIReady() { player = new YT.Player('pl ...
Working on a verification system where users are redirected to verify their account with an OTP code after signing up. However, I encountered an issue where the code doesn't seem to work as expected and no error messages are being displayed. <?php ...
How can I create a dynamic table in PHP that can handle any generic array with different keys and values, including nested arrays? I want to use the same table structure for various arrays regardless of their content. Any advice on achieving this flexibili ...
Is it possible to style a custom HTML tag called "location" without directly modifying the DOM? For instance, having <location loc-id="14" address="blah" zipcode="14" /> Would it be feasible to render it like this: <div class="location"> ...
I'm currently working on implementing responsive padding for a component. Given that Tailwind CSS follows a mobile-first approach, I have set the mobile padding to p-3, while screens at "md" and larger widths should use p-5. However, it seems like the ...
I'm currently working on a code block that resembles the following: <p class="cont"> <a href="otherpage.php" class="link"><img src="test.jpg" alt="" width="100" height="100"/></a> </p> Additionally, I have some CSS sty ...
My issue is with a javascript function that I've called on the html unload event. It seems to be working fine in Google Chrome, but for some reason it's not functioning properly in Firefox and IE. <script> function fun() { ...
I am currently working on a form that includes a textbox and a button for submitting data using ajax. <input type="password" id="password" /> <button id="addaccount" onclick="showload();">Add</button> When the user clicks on the button, ...
I was struggling to make the code work on certain browsers. The code you see in the resource URL below has been a collection of work-around codes to get it functioning, especially for Android browsers and Windows 8. It might be a bit sketchy as a result. ...
This is a class for span with the CSS properties position:absolute; top:0px; left:0px; right:0px; .textStyle1 { font-size:24px; font-family:'Arial'; position:absolute; top:0px; left:0px; right:0px; } #div1 { position:absolute; lef ...
I am currently facing challenges with managing my assets using webpack. I have installed font-awesome via yarn and imported the .css files into my webpage. However, despite my HTML recognizing the classes from font-awesome.css, the icons I am attempting to ...
Here we go again... I'm having trouble with my sub-menu elements moving when I hover over them. I've searched for a solution but haven't found anything helpful. The previous advice I received about matching padding and adding transparent bo ...
I've been struggling with aligning my cards side by side. They are a series of divs nested in lists under a <ul> Changing the positioning is not resolving the issue, and I'm hesitant to alter the display as it's crucial for responsive ...
The header element is contained within a div. I have positioned the header as fixed, leading to 2 issues: The width of the header extends beyond the width of the div container. It should align with the div. When the header is fixed, the other elements li ...
I have a card with the style property "display: flex;" applied to it along with other stylings, all of which are checked in the snippet below. My goal is for the text within the card to move to a new line once its width reaches either 120px or 7 ...
I currently have 5 divs that I need to structure in a specific way: Each div must have a minimum size of 100px The parent container should display as many divs as possible on the first row, with any remaining divs wrapping to new rows if necessary If the ...
Have you checked out the website here? I'm facing a problem on that site and can't figure out why. I've installed PDO, PHP, httpd, php-mysql, but still unable to resolve the issue. I've even tried reinstalling everything and following ...
I am attempting to create a custom shape, but I am facing an issue where using moveTo prevents me from filling it. Is there any method to determine points on the screen to fill a shape? Or should I use or draw another real shape in the same layer block? T ...
Currently facing an issue that needs to be resolved. I have a number of divs, each of which reveals a Span containing some text when hovered over. I've written a jQuery script for this functionality, but it currently displays all the Span elements whe ...