I’m having trouble with the hero section on my website. I want the minimum height to be 100vh, but without a fixed size of 100vh to ensure responsiveness. However, when I set a minimum value of 100vh for the section, the container doesn’t adjust to the full height, causing layout issues. The container only resizes properly when I use a fixed value of 100vh for the section.
Do you have any idea why the container doesn’t take the full height when I set the section’s minimum height to 100vh?
I probably don’t fully understand the need here but from what I see the main section works to use a min height of 100vh but the interior div (currently set to 100%) does not work. I can only get it to work by setting a 96vh to maintain the bottom margin.
Then, If I shrink the viewport height, the setting is overridden by the content within the div. The cumulative height of these elements won’t allow the div to be this short unless internal scrolling is enabled and overflow is hidden. You can test this by using the settings I’ve outlined and then delete some of the content and test the browser height.
Again, you might need to explain the need for this setting because I’m not sure what you’re trying to achieve.
