Дисплей CSS: некоторые divs исправлены, некоторые гибкие (2)

как-то я очень плохо отношусь к этому, поэтому мне нужны ваши ребята. Проблема аналогична моей предыдущей проблеме (найти ее здесь: Display CSS: some divs fixed, some flexible).Дисплей CSS: некоторые divs исправлены, некоторые гибкие (2)

На этот раз мне нужно, чтобы DIV-3 был гибким, который становится маленьким и большим по мере изменения высоты окна, и все остальные DIVS должны быть исправлены. Итак, вот иллюстрация: enter image description here

Может кто-нибудь, пожалуйста, помогите мне со скрипкой, как в прошлый раз. Большое спасибо.

это пример кода, но реально не важно, вероятно:

#DIV-1{ 
position: fixed; 
padding: 1em 2em; 
top: 6.8em; 
right: 0; 
height: 9.5em; 
width: 18%; 
bottom: 75%; 
} 

#DIV-2{ 
position: fixed; 
padding: 1em 2em; 
width: 18%; 
top: 16em; 
bottom: 18em; 
right: 0; 
} 

#DIV-3{ 
position: fixed; 
padding: 1em 2em; 
bottom: 0em; 
right: 0; 
width: 18%; 
height: 18em; 
overflow-y: auto; 
}

источник

2014-12-31 Marc

Мне действительно трудно представить, как это будет выглядеть. «Фиксированный» элемент полностью игнорирует прокрутку; это похоже на то, что он приклеен к окну просмотра браузера. Вы просто хотите, чтобы она была такой же высокой, как на странице (и я думаю, не исправлена?) – Katana314

Почему это было проголосовано? –

твоя скрипка? или если у вас его нет, попытайтесь реализовать то, что, по вашему мнению, должно произойти, чтобы мы могли помочь вам вместо того, чтобы просто писать код для вас. – indubitablee

Я думаю, что это может быть то, что вы хотите (используя ответ из вашего другого вопроса) ... ужасный способ создать что-то, хотя ха-ха.

http://jsfiddle.net/uKPEn/5/

.middle1 { 
    background: blue; 
    height: 100px; 
    top:50px; 
} 
.middle2 { 
    background: green; 
    top: 150px; 
    height: 100px; 
} 
.logo { 
    background: pink; 
    overflow: scroll; 
    top: 250px; 
    bottom:0%; 
}

Не совсем уверен, но вы могли бы рассмотреть возможность использования что-то вроде Isotope или Masonry для создания материала, который подходит вместе, как это.

источник

2014-12-31 14:29:57

Используйте функцию CSS calc()

html, body { 
    background-color: transparent; 
    height:100%; 
    width: 100%; 
    margin: 0px; 
    font-size:8pt; 
} 

#header { 
    box-sizing: border-box; 
    width: auto; 
    height: 6.8em; 
    border: 1px solid red; 
} 

#section { 
    box-sizing: border-box; 
    width: calc(100% - 18%); 
    height: calc(100% - 6.8em); 
    overflow-x: auto; 
    border: 1px solid blue; 
    float: left; 
} 

#DIV-1 { 
    box-sizing: border-box; 
    float: left; 
    border: 1px solid purple; 
    height: 9.5em; 
    width: 18%; 
} 

#DIV-2 { 
    box-sizing: border-box; 
    float: left; 
    border: 1px solid green; 
    height: 9.5em; 
    width: 18%; 
} 

#DIV-3 { 
    box-sizing: border-box; 
    float: left; 
    border: 1px solid orange; 
    height: calc(100% - 25.8em); 
    width: 18%; 
    overflow-y: scroll; 
}

HTML

<div id="header">Header</div> 
<div id="section">Section</div> 
<div id="DIV-1">1</div> 
<div id="DIV-2">2</div> 
<div id="DIV-3">3</div>

Пример на: http://jsfiddle.net/7baotd4o/

calc позволяет нам, удивление, вычислить значение для CSS. http://caniuse.com/#feat=calc

источник

2014-12-31 14:28:30 Mouser

Дисплей CSS: некоторые divs исправлены, некоторые гибкие (2)

ответ

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