Как вы получаете боковую панель, чтобы заполнить пространство?

Использование this техника для липких нижних колонтитулов и дать this пример.Как вы получаете боковую панель, чтобы заполнить пространство?

* { margin:0; } 
html, body { height:100%; } 
#wrap { 
    min-height:100%; 
    height:auto !important; 
    height:100%; 
    margin:0 0 -47px; 
} 
#side { float:left; background:#ccc; width:100px; overflow:hidden; } 
#body { float:left; background:#aaa; width:300px; } 
#foot, .push { height:47px; } 
#foot { background:#eee; }

Как сделать так, чтобы боковая панель и/или окно контента заполняет пространство между верхним и нижними колонтитулами?

Я попытался установить высоту на 100%, но это (не удивительно), похоже, не воспринимается. И я не могу установить фиксированную высоту, так как она все равно будет разбиваться на большие экраны.

Кто-нибудь хочет пролить свет на это?

EDIT: Ответ, выбранный для этого вопроса, не подходит для конструкций с полупрозрачными нижними колонтитулами. Показать здесь: http://jsfiddle.net/AfwzD/23/

Как таковой, я хотел бы добавить это к вопросу тогда. Как вы заставляете его работать для такого типа дизайна?

источник

2013-03-29 clueless

Заканчивать Faux столбцов для быстрого и легкого взлома: http://alistapart.com/article/fauxcolumns В принципе, вы создаете фон в родительском div, который заставляет столбцы отображаться на всю высоту самого высокого div. – nathancahill

Это немного сложнее. Единственный способ сделать это, который я нашел, - это установить огромную нижнюю и противоположную границу, чтобы компенсировать это. Кроме того, вы должны дать #wrapoverflow: hidden:

#body { 
    ... 
    padding: 80px 20px 1050px; 
    margin-bottom: -1000px; 
}

Демо: http://jsfiddle.net/AfwzD/21/

источник

2013-03-29 17:31:14 dfsq

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

Возможно, потому что я использую эту технику в своем собственном проекте, и она отлично работает даже в IE. – dfsq

О, и это должно быть упомянуто, это не будет работать для нижних колонтитулов, которые полупрозрачны по дизайну. Как показано на этом примере: http://jsfiddle.net/AfwzD/23/. Не хочу задавать другой вопрос, поэтому я просто отредактирую это. – clueless

Вы можете сделать это только через javascript. Совсем так.

window.addEventListener("resize", function() 
{ 
    /*var nContentHeight = window.innerHeight - headerHeight - footerHeight;*/ 
});

источник

2013-03-29 17:29:22

Вам необходимо очистить плавающие элементы, чтобы они были помещены обратно в поток страницы.

HTML

<div id="side">...</div> 
<div id="body">...</div> 
<div class="clear"></div>

CSS

.clear { clear:both; }

источник

2013-03-29 17:29:32

Как вы получаете боковую панель, чтобы заполнить пространство?

ответ

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