Мне нужно, чтобы на моем сайте произошло следующее: Счетчик и логотип (сверху, снизу) должны всегда иметь одинаковую высоту и оставаться сверху и снизу, даже если высота экрана уменьшится/увеличится. НО 2 других divs между ними должны быть меньше/больше при изменении окна. На этом примере я надеюсь, что это проще понять:
Логотип будет исчезать, когда высота экрана слишком низкая, прямо сейчас. Вот css:
Раздел составляет 80% ширины и в сторону 20%, но это действительно не имеет значения здесь...
#countdown{
padding: 0.5em 0.5em 0.5em 3em;
margin: 0.5em;}
#addProject{
margin: 0.5em;
padding: 0 1em;
height: 44%;
overflow-y: auto;}
#Nye{
margin: 0.5em;
padding: 0 1em;
overflow-y: auto;
height: 40%;
}
#logo{
margin: 1em;
height: 5em;
}
@Rémi предложил хорошее начало, но я бы рекомендовал использовать позицию: исправлено.
Это привяжет ваши элементы к окну браузера, независимо от количества вашего контента.
например:
.counter, .middle1, .middle2, .logo {
position: fixed;
width: 20%;
min-width: 200px;
right:0;
}
.counter {
background: yellow;
top:0;
height: 50px;
}
.middle1 {
overflow: scroll;
background: blue;
top:50px;
bottom: 50%;
}
.middle2 {
overflow: scroll;
background: green;
top: 50%;
bottom:50px;
}
.logo {
background: pink;
bottom:0;
height: 50px;
}
Это немного сложно, но я обнаружил, что это действительно выполнимо без javascript. Вот сценарий, чтобы проиллюстрировать это http://jsfiddle.net/2LyUy/3/
Вы должны сделать 3 вещи:
Css дает это (не забудьте обернуть 2 средних divs новым):
aside#test { position: relative; }
/* so that the "absolute" below work as expected */
/* any of "relative" "absolute" or "fixed" positioning would work here, depending on the needs */
#countdown {
position: absolute; left:0; right:0; /* could be factored out if preferred */
top:0; height: 150px;
}
#logo {
position: absolute; left:0; right:0;
bottom:0; height: 50px;
}
#wrap {
position: absolute; left:0; right:0;
top:150px; bottom: 50px;
}
#addProject {
position: absolute; left:0; right:0;
top:0; height:50%;
}
#Nye {
position: absolute; left:0; right:0;
bottom:0; height:50%;
}
Вот фрагмент кода обертки div:
</div></div>
<div id="wrap"> <!-- added -->
<div id="addProject"
....
<br>
</div>
</div> <!-- added -->
<div .... id="logo"></div>