возникли проблемы с настройкой css высоты div, чтобы она составляла 50% страницы. Я хочу жидкую разметку, не используя ни em, ни пиксели - PullRequest
Новая
       9

возникли проблемы с настройкой css высоты div, чтобы она составляла 50% страницы. Я хочу жидкую разметку, не используя ни em, ни пиксели

0 голосов
/ 07 ноября 2011

Я пытаюсь настроить жидкостный макет страницы, и мне очень трудно отрегулировать высоту элементов div.Я не хочу фиксированный макет, потому что я хочу, чтобы страница соответствовала перчатке, независимо от размера экрана.Я использую только проценты, без пикселей или их.Макет страницы выглядит примерно так: 

header
wrapper
  left column, top
  left column bottom
  right column, top
  right column, bottom
footer

Теперь я хочу сделать левый столбец, верхнюю 50% высоты страницы и левый столбец, правый остальные 50% высоты страницы.Проблема в том, что содержимое переполняется и обрезается, что заставляет меня использовать полосы прокрутки и устанавливать высоту пикселей.Это не то, что я хочу.В идеале я хотел бы установить div на 50% страницы И использовать полосы прокрутки, если содержимое переполняется.Имеет ли это смысл?

Как мне поступить?Буду очень признателен за любую помощь.

Большое спасибо.

1 Ответ

2 голосов
/ 07 ноября 2011

Это было бы лучше для jquery.Вы можете вызвать его, чтобы изменить высоту при загрузке и при изменении размера окна.

Чтобы получить высоту и ширину окна, вы должны использовать 

windowHeight = $(window).height();
windowWidth = $(window).width();

Вы берете это и назначаете его переменной ивычтите высоту верхнего и нижнего колонтитула.И в настройке CSS, используя 

${'#content_container').css({width: windowwidth+"px", height: windowHeight+"px"});

Затем, если кто-то изменяет размер окна, вы запускаете те же параметры в функции, подобной следующей 

$(window).resize(function() {
 //update stuff
});

Ваш код будет выглядеть примерно так, как показано ниже, ноchange будет делать то же самое для каждого из них. 

$(document).ready(function(){
 windowHeight = $(window).height();
 windowWidth = $(window).width();
 divHeight = (windowHeight - 100 - 100)/2; // heights of your header/footer
 divWidth = windowWidth / 2;
 $('#content_container').css({width: divWidth+"px", height: divHeight+"px"});
});

$(window).resize(function() {
 windowHeight = $(window).height();
 windowWidth = $(window).width();
 divHeight = (windowHeight - 100 - 100)/2; // heights of your header/footer
 divWidth = windowWidth / 2;
 $('#content_container').css({width: divWidth+"px", height: divHeight+"px"});
});

Вы можете заменить 100 для статических вызовов высоты, назначив переменную и вызвав $ ('# divid'). height ();Так как ваш заголовок является позицией: абсолютный, если вы вычтете заголовок, вам нужно будет расположить div сверху сверху на тот же пиксель.

Чтобы вызвать js, включите следующее перед javascript выше. 

<script src="http://code.jquery.com/jquery-1.6.4.min.js" />
...