Расчет высоты div с использованием Less.js в жидком макете

У меня есть макет жидкости и я изучаю/использую Less.js для своих CSS.Расчет высоты div с использованием Less.js в жидком макете

У меня есть div 'A', который должен учитывать пользовательский вид, вычесть другую высоту div 'B' (которая находится в%) и, наконец, еще один div 'C', который находится в пикселе.

Вот что я думал, что будет работать, но это не так:

@menubarsHeight: 7%; // declaring variable with div 'B' 's height. 
@ttlHeight: '$(window).height()';  // calculating height using jquery 
@midParentHeight: -20px + @didParentHeight - @menubarsHeight;  // calculating the height based on the above two variables, -20px is the height of div 'C'.

источник

2012-05-13 Kayote

Есть несколько вещей, нечеткие здесь. А именно, вы не говорите нам, что такое @didParentHeight, и вы вычисляете @ttlHeight, но не пользуетесь им. Вы также не указали явным образом, что является родителем div B (окно?).

Учитывая эти неопределенности, я возьму на себя некоторые вещи и попытаюсь ответить. Если все три DIV-х есть окно, как их родители, и ваш браузер дает правильную высоту окна, то кажется, что это было бы ответ:

@menubarsHeight: 0.07; /* define as decimal */ 
@midParentHeight: @ttlHeight - 20px - (@ttlHeight * @menubarsHeight);

Я использую 0.07 вместо 7%, потому что я не совсем если LESS выполнит умножение правильно с использованием процента (это будет смешение px и % единиц). Так с десятичной, то предполагая @ttlHeight были 100px, это должно рассчитывать на:

@midParentHeight: 100px - 20px - (100px * 0.07);

Который должен стать:

@midParentHeight: 100px - 20px - 7px = 73px

Если вам нужно использовать @menubarsHeight позже на самом деле определить свой Div B, то сделать это (что будет иметь десятичную и поместить его в % единицу значение для CSS):

div.B { height: percentage(@menubarsHeight); }

источник

2012-05-13 18:49:42 ScottS

Thank you ScottS. Я играл с переменными и неправильно вставлял старый ref. к другой переменной. Ответ правильный, за исключением того, что при загрузке страницы я получаю ошибку «C работать не является функцией». Я подозреваю, что это делать с jquery в less.js. Есть ли ссылка. как связать jquery меньше? – Kayote

P.S: Я буду проверять это как правильный ответ завтра. Я надеюсь, что проблема с jquery будет решена, оставив это открытым до завтра. Best, – Kayote

@ Kayote - возможно [этот сайт] (http://siderite.blogspot.com/2010/03/css-less-jquery-plugin.html) поможет с вашим jquery. У меня мало опыта с LESS, и нет опыта интеграции с jquery. – ScottS

к ш ay, как оказалось, вам не нужно меньше/js делать то, что я пытался сделать, то есть рассчитать высоту видового экрана.

Следующий простой CSS разрешил проблему. Тем не менее, ответ Скотта является удивительным для меньшего запроса.

position: absolute; 
    top: 8%; 
    bottom: 50px; 
    left: 1.5%; 
    right: 1.5%;

источник

2012-05-15 07:53:09 Kayote

Расчет высоты div с использованием Less.js в жидком макете

ответ

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