- This topic is empty.
July 3, 2013 at 6:49 am #46072
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
P.S. Height numbers will be random.July 3, 2013 at 7:18 am #141272
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 #141420July 3, 2013 at 7:48 am #141427July 3, 2013 at 8:04 am #141432
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 #141435
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 #141438
your welcome :(
var height = $(this).prev(‘.wrapper’).height();
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:July 3, 2013 at 8:21 am #141440
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 #141441
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…
Unfortunately, my JS is very poor.July 3, 2013 at 8:33 am #141442
@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 #141443
Amm, if there is more element I mean in wrapper, what to do then?July 3, 2013 at 8:39 am #141444
>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 #141445
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 #141446
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 #141448
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/