Random height on element

[nuodas159]

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

[Paulie_D]

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.

[waylaid]

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

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

[nuodas159]

And how to make if like this is?

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

[Paulie_D]

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?

[nuodas159]

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?

[waylaid]

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

[waylaid]

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?

[Paulie_D]

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.

[Paulie_D]

@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….. :)

[nuodas159]

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

[Paulie_D]

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

[nuodas159]

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();

[Paulie_D]

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.

[waylaid]

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: https://css-tricks.com/understanding-border-image/

[Author]

Posts