Grow your CSS skills. Land your dream job.

Random height on element

  • # July 3, 2013 at 6:49 am

    Hello,
    I want to ask how to do like this:

    1. IF wrapper – height: 200px – block height: 200px

    2. IF wrapper – height: 300px – block height: 300px

    3. IF wrapper – height: 50px – block height: 50px

    4. IF wrapper – height: 10px – block height :10px

    5. IF wrapper – height: 800px – block height: 800px

    and etc…

    P.S. Height numbers will be random.

    http://codepen.io/anon/pen/jFpgr

    # July 3, 2013 at 7:18 am

    You can’t use the same ID more than once.

    Try it with classes?

    What is it you are trying to achieve as it may be that, perhaps, you are going the wrong way.

    # July 3, 2013 at 7:24 am

    Here’s a codepen using jQuery (and as @Paulie_D says, classes :p)

    http://codepen.io/waylaid/pen/grEFz

    # July 3, 2013 at 7:48 am

    And how to make if like this is?

    http://codepen.io/anon/pen/pDBJw

    # July 3, 2013 at 8:04 am

    That really won’t work. The block will be inside the wrapper.

    So, if you get the height of the wrapper and make the block the same height it will then double the height of the wrapper and you would have to start all over again.

    As I asked before, what are you trying to achieve?

    # July 3, 2013 at 8:12 am

    Amm, I need to do block(hr) height like wrapper and the block(hr) will be in wrapper. There isin’t any way to do it?

    # July 3, 2013 at 8:17 am

    your welcome :(

    change
    var height = $(this).prev(‘.wrapper’).height();

    to
    var height = $(this).parent().height();

    and remember to select jQuery in the codepen JS menu.

    Of course if you now put content into .block it will affect the height of the wrapper so each block will look higher than the height of the content above it. You can get round that with this but it will start getting messy:

    http://codepen.io/waylaid/pen/yAjIs

    # July 3, 2013 at 8:21 am

    hmm, posted this before you said what you wanted to do with block(hr). Do you mean you want a border under each wrapper that is the same height as the wrapper?

    # July 3, 2013 at 8:31 am

    Well, I think this “block(hr) ” you are using (as I recall the concept) is a little odd as I mentioned.

    I think it would make more sense to have a set up like this…

    http://codepen.io/Paulie-D/pen/vjfGx

    …and then use javascript to determine which has the taller height (content or border) and apply a border (left or right) to whichever is tallest.

    Unfortunately, my JS is very poor.

    # July 3, 2013 at 8:33 am

    @waylaid No, the block(hr) means that he, effectively, wants a vertical version of the `hr` element…essentially an `vr` which, of course, doesn’t exist.

    He’s faking it with a border….. :)

    # July 3, 2013 at 8:36 am

    Amm, if there is more element I mean in wrapper, what to do then?

    # July 3, 2013 at 8:39 am

    >Amm, if there is more element I mean in wrapper, what to do then?

    I think you are trying to do something that isn’t quite available as yet. CSS columns as I mentioned in your previous thread would seem to be the answer. but they aren’t fully supported as yet.

    If you have a detailed picture of what the page or section should look like (and I don’t mean a rough example in codepen) we might be able to offer suggestions.

    At the moment we come up with ideas and you keep changing it is what you want.

    Of course, you could always use an bg image. :)

    # July 3, 2013 at 8:49 am

    I wrote in css topic about hr veritcal and I thought that I found good method. But I found a mistake that profile height are random I mean – PROFILE HEIGHT > MESSAGE HEIGHT. So I decided to do with javascript like you told me.

    So @waylaid could you tell me how then to do if there in wrapper are more element?
    I tried but this isin’t working.

    var wrapperHeight = $(‘.wrapper’).height();

    # July 3, 2013 at 8:58 am

    Hmmm, maybe flexbox with a left border on all internal divs except the first? I will have to think although I do feel that a js solution could be found.

    # July 3, 2013 at 9:17 am

    If you could create an example pen as @Paulie_D says, with a layout close to what you are wanting and with some example content, then we’ll have a better idea of what you’re hoping to achieve.

    At the moment I don’t see why a border on the internal divs wouldn’t do you you need. Have a look at this about border images: http://css-tricks.com/understanding-border-image/

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".