Разделите div на четыре равные части, заполнив область просмотра фиксированной панелью навигации.

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

Для навигации установлено значение position:fixed
Для элемента div, содержащего элемент div с содержимым, установлено значение position:absolute height:100% width:100%
Сами четыре элемента div с содержимым имеют значение float:left height:50 % ширина: 50%

Я даже не уверен, что с этим можно справиться только с помощью css, если это возможно, это было бы здорово, если нет, я не буду использовать другие возможности. Любая помощь, как всегда, приветствуется.

Область разработки: http://riverhousegolf.icwebdev.com


css fluid-layout
person visyoual    schedule 26.03.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Может быть, есть решение только с CSS, но вот решение jQuery. Содержимое под меню заполнит оставшееся пространство без полос прокрутки.

Разметка HTML будет следующей:

<div id="menu">SOMETHING IN MENU</div>
<div class="content">
    <div class="part1"></div>
    <div class="part2"></div>
    <div class="part3"></div>
    <div class="part4"></div>
</div>

CSS:

body,html{padding:0; margin:0;height:100%;width:100%;}

#menu {
    position: fixed;
    top: 0;
    background: blue;
    height: 50px;
    width: 100%;
}

.part1 {
    width:50%;
    height: 50%;
    float: left;
    background: purple;
}
.part2 {
    width:50%;
    height: 50%;
    float: left;
    background: red;
}
.part3 {
    width:50%;
    height: 50%;
    float: left;
    background: green;
}
.part4 {
    width:50%;
    height: 50%;
    float: left;
    background: silver;
}

.content{
    width: 100%;
    position: relative;
}

jQuery:

var height = $(document).height();
var menu_height = $("#menu").height();
var content_height = height - menu_height;

$(".content").css("height", content_height);
$(".content").css("top", menu_height);

ДЕМО

Самая важная часть — это jQuery. Сначала нам нужно получить высоту документа (html), затем высоту меню. Затем мы вычитаем высоту меню из высоты документа, и результатом является высота содержимого. Тот же результат мы применим к верхнему положению контента, чтобы избежать перекрытия.

person Miljan Puzović    schedule 26.03.2013
comment
Работал как чемпион. Я действительно даже не убежден, что существует чистое решение css. Я знаю, что испробовал множество подходов к позиционированию и отображению, но безрезультатно. Это сработало отлично. Спасибо всем за помощь. - person visyoual; 27.03.2013

arrow_upward
0
arrow_downward

Удалите «переполнение-у: прокрутка»; атрибут из вашего селектора "html" в вашей таблице стилей.

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

<div class="spaceTaker" >

что поднимает остальную часть страницы вниз.

http://jsfiddle.net/Dtwigs/XRJ8n/

Edit2: попробуйте оставить все значения одинаковой ширины. Но удалите все высоты, где они установлены в процентах. Элемент html должен иметь высоту: 100%, но ваши плитки и т. д. не должны. Теперь поместите этот jquery на свою страницу.

$( function () {
    var pHeight = $("html").height() - $("nav").height(); 
    $(".tile").height(pHeight / 2);    
});

Также сделайте вашу навигационную позицию относительной.

http://jsfiddle.net/Dtwigs/XRJ8n/

person Danwilliger    schedule 26.03.2013
comment
Это предотвратило прокрутку, но навигация по-прежнему обрезает верхнюю часть основного элемента div. Контейнер div с четырьмя ссылками должен заполнять все оставшееся пространство под навигацией, а не все окно просмотра. - person visyoual; 26.03.2013
comment
Посмотрите мое редактирование, я думаю, что это лучшее, что я могу сделать без использования JS. - person Danwilliger; 26.03.2013
comment
p.s. Если вам не нужна полоса прокрутки, почему вы используете position: fixed; для навигации? - person Danwilliger; 26.03.2013
comment
Я использовал position:fixed, потому что это было ближе всего к моей цели. Использование чего-то другого, кроме фиксированного (например, абсолютного), дает вам тот же результат, что и определение высоты для навигации. Это решение по-прежнему сдвигает четыре элемента div вниз, а не просто заполняет оставшуюся область, что в конечном итоге приводит к прокрутке или обрезанию контента. - person visyoual; 26.03.2013
comment
Да я вижу. Я добавил правку с некоторым кодом jQuery, который вы можете попробовать. Это не совсем правильно работает на jsFiddle, но я думаю, что это должно работать на вашей странице. - person Danwilliger; 26.03.2013