CSS Предыдущий элемент

Есть ли способ достичь этого с помощью CSS?
элемент высота = 100% минус предыдущий высота элементаCSS Предыдущий элемент

Пожалуйста, не дают ответа на JavaScript, потому что у меня уже есть:

CSS:

.mydiv{ 
    height:100%; 
}

JavaScript (JQuery):

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

На самом деле, я хочу воспроизвести второй эффект this demo, используя только CSS.
Благодаря

Edit:
То, что я точно хочу, чтобы достичь: Я хочу, чтобы два элемента, чтобы соответствовать вертикально в своих родителях, без указания первой высоты элемента

источник

2012-05-31 skafandri

Довольно уверен, что вам нужно JS сделать это, извините. Я не видел способов делать вычисления в CSS. – matthewvb

Хотя существует возможность использовать выражение в CSS, он поддерживается только IE. Кроме того, нет способа ссылаться на предыдущий элемент только в CSS. Вы можете рассмотреть возможность поиска альтернативного языка стилей, например [LESS] (http://lesscss.org/). – Quantastical

Ну, на самом деле ... LESS и SASS являются замечательными, но они являются компиляторами CSS, а не альтернативным языком стилей. На самом деле, я даже не думаю, что CSS квалифицируется как язык. Продолжайте ... –

Использование display:table и display:table-row для достижения этой цели с помощью CSS

There is the demo

источник

2012-05-31 13:38:15 Koerr

Almoust perfect! Хорошо работает в FF, Chrome, Opera, Safari, IE9, IE8, просто это не работает на IE7, любое предложение? – skafandri

Я использую '* + переполнение: скрытый', чтобы исправить его на демо-версии IE7: http: //jsfiddle.net/a3Bmx/, мне также хотелось бы знать другую лучшую идею. – Koerr

Нет, по 2 причинам:

У CSS нет понятия «предыдущий». Есть несколько селекторов, которые будут использовать элементы после (например, «+», «~»), но не раньше.
Я думал, что может быть какой-то умный способ воспользоваться преимуществами наследования CSS, но я не думаю, что это сработало. Вы можете установить высоту до 50% от ее родительской, но вы бы переопределили ее первоначальную высоту, поэтому разрушили шансы на выполнение типа вещей this.height - prev.height.

Простой ответ нет.

источник

2012-05-31 13:27:19

Так вот, это одна причина. # 2 было больше мозгового пердуна. –

На самом деле то, что вы должны спросить здесь, это если это должно выглядеть так или вести себя так.Причина, если это только должно выглядеть так, что это можно сделать. – easwee

Вы можете достичь макета, не делая математику, используя как top и bottom

http://jsfiddle.net/UNnGP/

источник

2012-05-31 13:34:06 swider

Что делать, если содержимое верхнего div превышает 50 пикселей? – easwee

А что, если содержание верхнего div меньше 50 пикселей? Я ** не хочу указывать высоту ** – skafandri

Решение таблицы будет работать, но оно представит другие побочные эффекты, такие как изменение стиля заполнения, поля и выравнивания по вертикали. Если вы действительно не можете указать высоту одного из них, я бы подделал его, [помещая тот же фон из второго блока на родителя] (http://jsfiddle.net/XKUdy/1/) – swider

Да вы можете. Но у вас должно быть переполнение: скрыто на вашем контейнере. Вот ссылка. http://jsfiddle.net/UNnGP/4/

источник

2012-05-31 13:47:39

Это не поможет, потому что это скроет * * content **, который я хочу отобразить – skafandri

Ну, ваша версия jquery делает это. Или он течет. Не выглядит красиво –

CSS Предыдущий элемент

ответ

Смежные вопросы