Why does `height: 100%` behave differently across the exact same HTML?-CodePudding

I currently have two sites with the same exact HTML and CSS, but I'm confused why they are rendering differently.

I'm trying to mimic this site: https://developer.mozilla.org/en-US/docs/Web/API/FormData/values

Here is my mimic: https://mirrorful-production.s3.us-west-1.amazonaws.com/123054cb-c7bd-4365-8553-6c9e8e18fc01/473639/mirror.html

I'm confused why the top banner gets rendered full screen in my mimic despite having the same exact HTML CSS as the original. Inspecting the elements confirms that the tree looks the exact same, and the CSS all looks the exact same.

The top banner (class name mdn-cta-container) has height: 100% as a property, but it seems to be calculated differently across the two sites. In the original, it gets set to the size of the content. In the mimic, it strangely gets set to the size of the viewport.

My understanding is that height: 100% will default back to the size of the content if no parent has a specified height (which seems like it's the case here), but my mimic does not seem to be doing that here. If I change height: 100% to height: auto, it seems to resolve it, but I don't fundamentally understand why this is happening with the literal exact same code.

Thanks in advance for any help!

CodePudding user response：

Your mimic is missing <!DOCTYPE html>. You need <!DOCTYPE html> to signal it's an HTML 5 document. Without it, it seems the height: 100% is not properly respected.

CodePudding user response：

It looks like some of your css files are not loaded. I get the following response for main.d5614840.css:

Request URL: https://mirrorful-production.s3.us-west-1.amazonaws.com/static/css/main.d5614840.css

Request Method: GET

Status Code: 403 Forbidden

Remote Address: 3.5.161.171:443

Referrer Policy: strict-origin-when-cross-origin

Several javascript files and assets are not loaded neither.