make div height of first child
Hey, how would you limit the height of a div to the first child’s height? In the image, I have a design where I’d like the first piece of content to show but the rest you’d have to scroll down to. I feel this may be something you have to achieve with js, but I also think that there’s a chance it could be possible with html and css, I’d appreciate any insight, thank you in advance.
24 Replies
I'm not sure you can without JS, but I'd also not recomment having it be the exact size. Have some overflow from the first, or show the top of the second item, that way it's extra obvious to people that the container scrolls
Ah okay, so grab the height of the first child and then apply that value to the parent? And taking your advice, add a little extra height on top of that?
yeah, or subtracting a little. Just for UX reasons, lots of folks won't think to scroll unless the scrollbar is very obvious or it's like an app they use all the time
it's not the best solution though, and I'd recommend having a sane guess as a default height in the CSS as a backup
Yeah that makes sense, it would just be a bit magic numbery haha, but anything that either shows a bit extra or cuts off a bit should do
yeah, and magic numbers are more of a thing to be aware of than to completely avoid anyway. There's lots of situations where a magic number is at the very least a decent fallback
Yeah I agree
wouldnt grid do the job?
as long as you can keep the parent the same height, you can do this with grid
or possibly with subgrid, but ive never used it for this
Hm, what’s your thought process with that method?
easy: 1fr is always the same chunk of the parent, if both parents have the same exact height
you can still set
grid-template-rows: 1fr 1fr 1fr
and the element will be in the first row, but the other 2 will be emptyThe other rows would have something in them though no? That’s the content that you’d have to scroll down to?
Apologies if I’m not understanding what you mean
what do you have so far?
I suspect that there is a miss-understanding here, possibly due to there being 2 parent elements in the initial diagram.
As I understand it snxxwyy only has one container/parent.
The aim is to define the height of that single parent container according to the first child height, hiding the other children within a vertical scroll.
maybe make a codepen?
Chris has the right idea, I’ll make a codepen when I get home to give a better idea
ah, and it is to have the height of a single child?
I was playing around with the idea of giving all but the first child a
position: absolute thus taking them out of the flow which would allow the parent element to have the height of the first child. It would then need to automatically position the children below their previous sibling. It is working except for calculating the correct y position for each child. I'll keep at it...Yeah, exactly.
Ah that sounds like a good method, I appreciate you taking the time to do that. I’ll play around with it myself too in a short while
Can you modify the HTML?
What do you mean, sorry?
Can you change the way the elements are defined in the HTML?
For example, could you wrap all but the first child in a new container?
Oh yeah for sure, there’s no restrictions
OK. I think that you can achieve this without JS by wrapping all the children, expect for the first one, in a wrapper.
Give this wrapper a
position: absolute; along with some margins/gaps etc and it should work.
I have updated my Codepen https://codepen.io/cbolson/pen/rNXBVbz to do this so you will understand it better.
Of course now that you are modifying the HTML there may well be alternative methods..
It's even responsive 😆Oh that’s awesome, I appreciate the demonstration, thank you
And thank you to everyone else