Forced html/body/main Height (Forced Automatic Resizing)

Is it even possible to stop the html/body/main elements from automatically resizing the height so that they can fit the content?

No matter what I try, the height HAS to be bigger than or equal to that of the combined content, but ignoring the content that has been taken out of flow, and shoved downwards - for example, position: absolute and top: 1000px

(This is not the case for width)

Probably. You could set a height on them and then use the overflow property to either hide overflowing content or scroll if there is overflowing content. But I’m not exactly sure I understand what you are trying to do so I don’t know if that will work for your specific situation. If you can provide us a link to your project or at least a simple, comparable example we may be able to help you better.

It’s more of “is this possible” than “how do I do this”.

I’ve tried the method of setting height and user overflow property, but that did not work.

Are you sure you are correct?

Yes, it’s possible. I actually tested it myself before responding to you. But I didn’t want to deprive you of the fun of figuring it out for yourself so I didn’t link to my solution. :smile: And I don’t have time right now to put together another example on codepen. And again, I’m not sure exactly what you are trying to do here, so perhaps my solution isn’t exactly what you wanted? It would be much help if you gave us a real example.

I keep failing, I’ve tried with overflow: hidden, I’ve tried with overflow: scroll, the closest I could get is this:
I’m trying to make the main/html elements act like a normal container, and clip the overflow, but they just automatically resize to make the overflow is visible.

I want the overflow to be hidden, but this doesn’t seem possible with the html/main elements.

I’m not sure what you mean by a “normal container”? The main element is a block level element which will by default take up all the space needed to display all of its content, so automatically resizing is its normal behavior. The html element is special and to be honest, you probably shouldn’t be messing with it too much.

But really, I don’t think I understand what you are trying to do here. I did put a demo together of what I “think” you are trying to do. But after thinking about it some more, I’m not sure I got it right. What would really help is if you could provide your HTML/CSS so we can see what you are trying to do instead of just guessing.

I haven’t responded for a long time, but how come the main block level element automatically resizes, while others, such as div, don’t? I tried tweaking attributes, but couldn’t achieve my goal.

To make it clear, I’m trying to make sure the main element does NOT automatically resize: I’m not yet sure how this can be done, so I’m assuming the main element is also a special block-level element.

As I mentioned earlier, the main element is a block level element and should behave exactly like a div. By default, both will take up as much height as needed to wrap the child elements within them and will also take up as much width as possible. But there are of course several ways to alter this behavior. But unless we can see your code then I don’t think I can give you answer here because I have no idea why some of your divs aren’t resizing.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.