The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS css box

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
  • #36274

    Hello all,

    What I would like to do is a css box of standar width but not of standar height.
    I need that box to have 100% of the screen height except 100 pixels top and 100 pixels bottom. In addition border radius and min height of 400px.

    I found a solution of that using overflow hidden which i don’t wanna use.
    Could you think a way of achiving this without overflow hidden?

    If you have difficulty understanding what i’m actually meaning I can draw and upload an image.

    Thanks alot and sorry for my english.
    I would love to see a solution on that.


    Something sort of like this?


    Sounds like you may need to use box-sizing.

    Here is my solution, assuming I’m interpreting the issue correctly:

    An alternative solution is to use 100px borders instead of padding on the parent element (you would then set box-sizing: border-box; on the #content).


    Josh wins. ;)


    TheDoc i didnt want to use overflow hidden, but yep like this.

    josh great! I wasnt aware of box-sizing property :S

    Thanks alot, that’s what I was looking for :)


    One more little thing I just figured out about this solution.
    When the min-height is reached, scroll down won’t show the padding-bottom space,
    any trick for that?

    (in other words padding-bottom I would prefer to be scrollable)


    @nim Then use the border technique:


    A nice solution as well! Thanks alot.
    I can’t find a right way to have border-radius though. Any thought on that?


    The safest way would be to nest a second div inside #content.


    That’s what I tried but this way the bottom border starts to dissapears after scroll bar appears and it can’t be visible by scrolling down.

    (thanks alot, you’re being really helpful)


    Do you have a link to the problem?


    I’ve created the final layout. There is just one “glitch” that I think I can’t fix.

    I can show personally you, if you are curious, what I was trying to make. =)
    Here’s a screenshot (you can’t see how scroll and resize works though, it’s a bit tricky)

    The left menu panel box is made using your method. The right “content” box is made with an other method I figured out because I wanted it to expand depending on the existing content (plus some other problems I had.)

    You’ve been really helpful, thanks alot.


    Thanks for posting the image, but I can’t really tell what the issue is. If you could post the problem code to or then I will have a poke around for you.


    There is a small issue while scrolling to the bottom but it’s alright josh, it’s almost perfect and that’s fine. =) thanks alot


    No worries.

Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘CSS’ is closed to new topics and replies.