Я работаю над адаптивным макетом и хочу, чтобы виджет оставался фиксированным/прилипающим, то есть он будет следовать за вами, когда вы прокручиваете страницу вниз.
Упрощенный HTML:
<div class="page">
<div class="content"></div>
<div class="sidebar">
<div class="widget1"></div>
<div class="widget2"></div>
</div>
</div>
CSS:
.page {
width:96%;
max-width:1000px;
margin:0 auto;
}
.content {
width:65%;
}
.sidebar {
width:28%;
float:right;
}
.widget1 {
position:fixed;
padding:7.15%; /* 20px of 280px */
z-index:10;
}
Проблема: widget1 удаляется из потока при добавлении position:fixed. Это приводит к тому, что процент заполнения рассчитывается из тела и полностью разрушает мой макет. Поскольку он удален из потока, он также больше не занимает 100% ширины боковой панели.
Что мне нужно: чтобы widget1 (с процентным отступом) соответствовал всей ширине sidebar.
Наиболее близкое решение, которое я нашел, предлагает добавить width:inherit к фиксированному элементу. Это прекрасно работает, но только если ширина родителя задана в пикселях, а не в процентах. Это также не помогает с тем фактом, что мне нужно добавить отступы.
Мы будем очень признательны за любые идеи или предложения. Я бы предпочел решение CSS, но я не против использования jQuery.
Если это поможет, я работаю над адаптивной темой на основе Twenty Ten. Сайт находится здесь: http://odin.reaktortest.no/hvorfor-velge-fixit/ Это бежевое поле, которое я хотел бы оставить на месте (#iwajax_contact_widget-2).
.pageи.sidebar). Количество, которое он выплескивает, похоже, равно размеру левого и правого отступов вместе взятых. Я попытался добавитьbox-sizing:border-boxв CSS виджета, но это не решило проблему. 30.06.2014