CODEWITHSUNDEEP
htmlcss
ilyes kooli
ilyes kooli

Reputation: 12043

CSS Previous element

Is there a way to achieve this with CSS?
element height = 100% minus previous element height

Please don't provide JavaScript answers, because I already have:

CSS:

.mydiv{
    height:100%;
}

JavaScript (jQuery):

$('.mydiv').each(function(){
    $(this).css('height', $(this).height() - $(this).prev().height());
});

Actually, I want to reproduce the second effect of this demo using only CSS.
Thanks

Edit:
What I exactly want to achieve: I want two elements to fit vertically in their parent, without specifying the first element height

Upvotes: 0

Views: 1465

Answers (4)

Alfred Larsson
Alfred Larsson

Reputation: 1349

Yes you can. But you have to have overflow:hidden on your container. Here is a link. http://jsfiddle.net/UNnGP/4/

Upvotes: 0

Koerr
Koerr

Reputation: 15723

Using display:table and display:table-row to achieve this with CSS

There is the demo

Upvotes: 1

swider
swider

Reputation: 3444

You can achieve the layout without doing math using both top and bottom

http://jsfiddle.net/UNnGP/

Upvotes: 1

Ayman Safadi
Ayman Safadi

Reputation: 11552

No, for 2 reasons:

  1. CSS doesn't have a concept of "previous". There are a few selectors that will use elements after (e.g. "+", "~"), but not before.
  2. I was thinking there might be some clever way taking advantage of CSS's inheriting powers, but I don't think that would work either. You may be able to set a height to 50% of its parent's, but you would be overriding its original height, therefore ruining the chances of performing a this.height - prev.height type of thing.

Simple answer is no.

Upvotes: 0

Related Questions