Как установить высоту в макете жидкости?

На странице дизайна веб-сайта RWD у меня есть 918px высоты для каждого ящика, использующего, как установить высоту для того же самого?Как установить высоту в макете жидкости?

Если я установил высоту в auto или 100%, это не сработает, если я исправлю высоту до 918px, это нормально для рабочего стола, но не для мобильных носителей.

.box{ 
    background-color:#0c71b8; 
    height:100%; 
    min-height:918px; 
    }

Коробки из 960px X 918px в размерах, и в этой коробке у меня есть изображения и содержание текста с цветом фона для него. Так как я могу зафиксировать высоту в процентах?

источник

2015-01-13 Sharath-designer

Вы могли бы потенциально использовать 'vh' блок вместо этого. http://stackoverflow.com/a/16837667/1317805 –

вы можете показать нам больше кода (разметки), пожалуйста, или сделать демо (например, скрипку)? –

@Dura вот jsfiddle: http://jsfiddle.net/59oex2ux/ –

Все родительские элементы .box должны иметь высоту 100%, тогда он должен работать.

источник

2015-01-13 10:25:35 mahatmanich

Пробовал, что не работал. –

Ваш html ist недействителен! – mahatmanich

Попробуйте использовать два решения.

jQuery - динамически найти высоту окна и применить ту же высоту к элементу html.

function handleResize() { 
    var hgt = $(window).height(); 
    $('.box').css({'height':hgt+'px'}); // HTML element names 
} 

$(function(){ 
    handleResize(); 

    $(window).resize(function(){ 
    handleResize(); 
    }); 
});

CSS - Сделать абсолютное положение и сделать верхний & нижнее значение ноль.

.box{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
}

источник

2015-01-13 10:48:46 shanidkv

Ну, я использую компоновку жидкости в Dreamweaver, так что, я думаю, высота, которую мне нужно контролировать с помощью самой css? –

Это зависит от вашего скелета HTML. Вы можете выбрать любой из указанных выше вариантов. В большинстве случаев опция jQuery будет установлена. – shanidkv

Вам нужно обернуть каждую коробку с родителем div с нужной высоты, как 918px, а затем установить высоту окна для 100%.

EDIT:

предыдущий демо не так. Вы также должны добавить overflow:auto в родительский div.

См new demo

источник

2015-01-13 10:59:59

Хорошо, что снова работает для макета рабочего стола, но НЕ для мобильного макета. 918px также должен фиксировать как процентное соотношение с макетом мобильного/вкладки. –

@ Sharath-дизайнер, вы правы, я пропустил немного. Проверьте обновленную демоверсию. –

Переполнение: автоматически скрывает окно, я не вижу его. –

Как установить высоту в макете жидкости?

ответ

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