Forums

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

Home Forums CSS Another 100% height issue

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #43996
    DADE
    Participant

    Hey guys,
    Here’s code example:

    http://jsfiddle.net/kA29C/

    Column one should be same height as Column two. How can I do this?

    Thank you.

    #131231
    CrocoDillon
    Participant

    Well, you can fake it: http://jsfiddle.net/kA29C/1/

    Don’t know why the center is off by a few pixels though :(

    #131234
    DADE
    Participant

    I’m not sure why did you added :after, it’ll work without it. Hah I’m not sure also but gradient idea works on my primary webpage as it should. Thanks.

    #131236
    CrocoDillon
    Participant

    That after is just some clearfix, without it you won’t see the background on the #wrap (at least on that fiddle). You gave it `height: 100%`, but that only works untill scrolling.

    By the way you can replace the gradient with a regular image if you need better browser support, else make sure to include at least vendor prefixes. :)

    #131240
    DADE
    Participant

    Okay I’ve just noticed that actually it wasn’t working, it was off by few pixels. To fix this I use:

    background: linear-gradient(to right, #65ad3d 160px, #fff 161px);
    background-size: 160px 100%;
    background-repeat: no-repeat;

    http://jsfiddle.net/kA29C/3/

    #131243
    CrocoDillon
    Participant

    In that case (the fiddle) you could have done just `-webkit-linear-gradient(left, red, red);` (or a small red background image), since the blue you see is from the background-color.

    #131245
    pixelgrid
    Participant

    there is a workaround with floats forcing the parent to contain its children http://jsfiddle.net/kA29C/4/

    #131247
    DADE
    Participant

    That makes sense. Thank you.

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