Forums

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
    Posts
  • #36274
    nim
    Member

    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.

    #95270
    TheDoc
    Member

    Something sort of like this? http://dabblet.com/gist/1666322

    #95273

    Sounds like you may need to use box-sizing.

    Here is my solution, assuming I’m interpreting the issue correctly: http://dabblet.com/gist/1666578

    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).

    #95274
    TheDoc
    Member

    Josh wins. ;)

    #95277
    nim
    Member

    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 :)

    #95279
    nim
    Member

    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)

    #95280

    @nim Then use the border technique: http://dabblet.com/gist/1666578

    #95309
    nim
    Member

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

    #95310

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

    #95312
    nim
    Member

    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)

    #95314

    Do you have a link to the problem?

    #95320
    nim
    Member

    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)
    http://img714.imageshack.us/img714/7118/panelss.jpg

    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.

    #95358

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

    #95412
    nim
    Member

    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

    #95424

    No worries.

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