HTML CSS body autosizing

Я знаю, что в этом вопросе много вопросов, но я не нашел ответа на свой вопрос.

У меня есть сайт формата новостей, в котором вы можете фильтровать сообщения по определенным критериям. Таким образом, с некоторыми фильтрами вы получаете контент намного выше, чем окно браузера. С другими фильтрами вы не можете получать контент.HTML CSS body autosizing

Когда я использую Web Inspector Webkit, я вижу, что html {min-height:100%} делает трюк для тега <html>. Я хочу, чтобы <body> выполнял то же самое: быть на 100%, если содержимое подходит на странице, и в противном случае развернуть.

Однако я не могу использовать процент height или min-height на корпусе, если высота не установлена для <html>. Он не наследует высоту, чтобы основывать ее процент от. Итак, в конце концов, когда у документа меньше полного содержимого, это все, что нужно урезать прямо и под ногами этого контента, что подталкивает мой фон и прочее.

Любые идеи?

источник

2012-03-19 Andrew

и вы не можете установить высоту для почему? –

Потому что это не позволит ему распространиться на все содержимое, когда содержимое больше, чем окно браузера. – Andrew

Если это произойдет, то вы установите переполнение на auto –

Может быть, вы можете попробовать что-то вроде этого:

html { 
    height: 100%; 
} 
body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 
#content { 
    min-height: 100%; 
}

Я надеюсь, что это помогает решить вопрос

источник

2012-03-19 15:17:11 davorivas

От ограниченных деталей это звучит как все, что вам нужно, это добавить в:

html,body{ height: 100%; }

И я предполагаю, что ваш фон на тело тега.

источник

2012-03-19 14:33:52 corymathews

Нет, это держит высоты на высоте окна браузера, что не хорошо, когда контент проходит мимо одной страницы окна. Тело имеет серый фон, и у меня есть центрированный белый div, где все содержимое идет. Проблема в том, что div может быть только размером с тело. – Andrew

Мое предложение - установить высоту тела на 100%. 100% означает, что он должен занимать столько же места, сколько и его родительский элемент. Так что, если ваш HTML тег делает то, что он должен, просто дайте тег тела взять тот же размер:

<html style="min-height: 100%"> 
<body style="height: 100%"> 
</body> 
</html>

источник

2012-03-19 14:36:38 devsnd

Элемент body, кажется, игнорирует проценты, если для html не указана высота, а не только минимальная высота. – Andrew

HTML CSS body autosizing

ответ

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