Бьюсь над проблемой уже 2й день и никак не могу понять почему.
Суть в следующем:
Есть див .cont с относительной высотой, в котором лежат 2 дива-контейнера - левый .left и правый .right. Левый с динамической высотой, который позволяет изменять размер родителя по высоте, а правый с фиксированной высотой (.right {height: 30px}). В случае, если .left растягивается по высоте, то .right должен центрироваться в родителе по высоте по центру. Самое простое, как мне казалось, решение - это отцентрировать .right с помощью JS. Для этого надо выяснить высоту родителя .cont, которая, как известно, зависит от высоты .left, вычесть половину .right и добавить это значение в margin-top для .right. Но вся проблема в том, что при ресайзе окна вылезают какие-то глюки с margin-top. И никак не могу понять из-за чего.
HTML:
<div class="cont">
<div class="left">
<div class="left__item">1</div>
<div class="left__item">2</div>
<div class="left__item">3</div>
<div class="left__item">4</div>
</div>
<div class="right">
какой-то контент с фиксированными размерами (250px X 30px)
</div>
</div>
CSS:
.cont {
width: 100%;
}
.right {
float: right;
height: 30px;
width: 250px;
}
.left {
margin-right: 270px;
}
JS:
$(window).resize(function(){
$(".right").css({"marginTop": $(".cont").height()/2-15})
})
Тоже самое срабатывает при дом-реди. Причем при дом-реди все нормально работает, а при ресайзе окна, вернее, при нажатии на кнопку "развернуть" в браузере берется откуда-то непонятный margin-top. Пробовал ради интереса делать тоже самое с setTimeout, но происходит задержка и все равно откуда-то берется margin-top.
Примечание:
UPD 2 Igor Pomaranskiy:
По классам - для простоты. Само собой в продакшене все будет работать на id. Нет, никаких пересекающихся названий классов нет. Все моменты касательно верстки я учел, но все равно бажит.
Предложенный вами вариант не работает - уже пробовал, к тому же делает тоже самое, что и у меня.
Примечание:
http://jsfiddle.net/fr4nki/QCNBh/ - рабочий вариант. Тут все ок, но бажить будет если все засунуть в файл, открыть и попробовать развернуть браузер на весь экран.
Примечание:
UPD 2 ax64:
Бажит в 7м осле, к сожалению. Однако в современных браузерах работает. Не подумал я про такую реализацию :) Спасибо.
RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.
Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.
Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.