Отображение CSS: некоторые исправлены, некоторые гибкие

0

Мне нужно, чтобы на моем сайте произошло следующее: Счетчик и логотип (сверху, снизу) должны всегда иметь одинаковую высоту и оставаться сверху и снизу, даже если высота экрана уменьшится/увеличится. НО 2 других divs между ними должны быть меньше/больше при изменении окна. На этом примере я надеюсь, что это проще понять:

Изображение 174551

Логотип будет исчезать, когда высота экрана слишком низкая, прямо сейчас. Вот 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; 
}
  • 2
    что ты уже испробовал? Пожалуйста, оставьте свой код, чтобы люди могли посмотреть и помочь вам.
Теги:
fixed

2 ответа

0
Лучший ответ

@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;
}

См. Http://jsfiddle.net/uKPEn/1/

  • 0
    работал очень хорошо. но могу я задать вам еще один вопрос, как я могу иметь эти div'ы также фиксированной ширины. Я думал, что могу сделать это с минимальной шириной, но когда я уменьшаю ширину окна, они становятся меньше вместо того, чтобы быть фиксированным, не меняя size.thx
  • 0
    получил, спасибо в любом случае: D
Показать ещё 1 комментарий
0

Это немного сложно, но я обнаружил, что это действительно выполнимо без javascript. Вот сценарий, чтобы проиллюстрировать это http://jsfiddle.net/2LyUy/3/

Вы должны сделать 3 вещи:

  • оберните ваши два средних divs в новый div, например, с id = "wrap".
  • добавьте другой атрибут позиции в сторону (например, "родственник", который вообще не будет перемещать ваш div)
  • затем установите счетчик фиксированного размера и логотип

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>
  • 0
    NB: я написал CSS до того, как вы добавили свой, поэтому идентификаторы / классы не совпадают
  • 0
    эй спасибо до сих пор. кажется, работает, но я должен позиционировать «раздел» также абсолютным? посмотрите в моем примере у меня есть большой раздел и в сторону
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню