Problem with a basic responsive container, which needs a min-height even when empty
https://codepen.io/OrzCode/pen/mdKjpYb
I have a
#content div in the middle section of this Codepen, which holds the content. This #content div is supposed to be 80% height of its parent (the middle cyan/teal section) when empty/to begin with, and should grow to scale to content size.
I can't get it to both: (1) grow with content without overflowing (which is what is currently happening in this codepen), and also (2) have a minimum size even when empty. eg when the #content div is empty, it should still be 80% height/width of the parent box. The #content div disappears entirely if I add code to make the middle section grow based on content.
To clarify, when empty, it serves as a 'shell' into which I will inject JS-based content8 Replies
Add a wrapper (inner) element before you start your content.
and
but honestly, I think you want a fixed header and footer and not doing this by grid.
Many thanks. Is
overflow-y really necessary in any situation like this?yes, if the content is bigger than the 80% height it will stretch. with overflow: hidden it's cut off - with auto it'll display a scrollbar if neccessary
FWIW, i've updated it to use flex on the overall container, with a larger
grow number on the central main section. Instead of making the internal blue container minimum 80%, I've made it minimum 80vh - this seems to register as a 'real' size as opposed to percentage, which makes it disappear.
This seems to have mostly solved my issue, though I was forced (unhappily) to add a margin to it, in order to preserve empty space around it. I suppose there's no way around thaT?
Essentially what I mean by this is - i was hoping/trying to achieve a margin/padding-like effect without actually using those attributes (by way of making it only 80%/vh of the parent box).
But when content fills up, it pushes itself to the rim of central areaYou usually do something by like this:
<header />
<main />
<footer />
header {
position: fixed;
top: 0;
}
footer {
position: fixed;
bottom: 0;
}
main {
margin: 100px 0 50px 0;
}
ah, right, I see - many thanks. That's another solution - though, i notice it still uses a margin.
I suppose there's nothing that wrong with using a margin, just that in my experience, margins and padding can interfere with sizing and spacing in viewports
There's nothing wrong with margins. And you can also do this with grid instead of sticky header / footer. But usually grid is used to layout elements inside something but not to fake a sticky header / footer. But if it works - it works. I'm not the CSS police 😉
Many thanks for your help. Sticky header footer is a good one to remember. For now with the updated codepen, it seems to be working well enough with an overall flex and a flex-grow of 15, 80, and 5 respectively (for header, main, footer) - adding up to 100