HTML тела меньше, чем его содержание

Вот основной illustration проблемы:HTML тела меньше, чем его содержание

<html><head><style type="text/css"> 
    html {width: 100%; height: 100%; background: red;} 
    body {width: 100%; height: 100%; background: green;} 
     
    .leftbar, .rightbar {height: 100%; background: blue;} 

    .leftbar  {float: left;} 
    .rightbar {float: right;} 

    table {width: 100px; height: 800px; background: black; color: white; 
           margin: 0 auto 0 auto;} 
</style></head> 
<body> 
    <ul class="leftbar"><li>one</li><li>two</li></ul> 
    <ul class="rightbar"><li>alpha</li><li>beta</li></ul> 
    <table><tbody><tr><td>blah blah</td></tr></tbody></table> 
</body> 
</html>

Мы можем сразу увидеть, что плавали ul элементы, как высокий, как body, который содержит их, проблема заключается в том, что body не такой высокий, как table, который он содержит.

Как сделать body достаточно большим? В этом примере я хочу, чтобы leftbar и rightbar прошли весь путь вниз, насколько позволяет прокрутка, поэтому вы никогда не увидите ни одного пробела ниже них.

источник

2012-02-22 spraff

-1

Использовать таблицы. Они нечистые, но они работают.

Решения на основе div включают неприемлемые компромиссы (абсолютные размеры, потеря поплавка).

источник

2012-02-24 17:09:06 spraff

_fsvo_ "work". Это недальновидно думать, что только потому, что они работают для вашего конкретного случая использования, они _must_ работают во всех других контекстах, в которых будет доступен ваш контент. –

Они работают в необходимом контексте, а альтернативы * не *. – spraff

Он не очень хорошо отражается на нашем сообществе, что мы проголосовали за действительный ответ, который потенциально решает проблему OP, просто потому, что он не в моде. Таблицы трудно поддерживать и ломают нормальный поток, но они представляют собой интеллектуальное решение нескольких проблем с маневрированием, особенно в мире pre-flexbox. (As is 'display: table;' на элементе нормального блочного уровня.) – XML

Удалить height: 100% из правила body - это делает тело высотой, как высота видового экрана (которая меньше высоты содержимого).

источник

2012-02-22 16:02:58

Это делает «тело» более высоким, но «ul» все еще только высота окна просмотра. – spraff

Имеет смысл. Чтобы '' '' заполнить 'body', он должен иметь определенную высоту. Установите его в '800px', как и его самый высокий дочерний элемент. –

Это делает так много смысла и полностью исправил эту случайно раздражающую проблему, которую я имел на сайте, как год назад. Я переключил его с высоты: 100% на минимальную высоту: 100% для учета страниц, где тело короче, чем область просмотра. Благодаря! – elainevdw

body{ height:100%; }

Это похоже на неправильное понимание кода. Высота «100%» относительно чего-то. Другими словами «100% чего?»

Что это делает, устанавливается body = размер окна. в JSFiddle это размер отображаемого окна. В браузере это будет 100% окна просмотра.

Итак, если вы уменьшите окно браузера до крошечного пространства просмотра, высота 100% будет на 100% меньше. Это точно.

Если у вас есть контент, который длиннее этого, вы столкнулись с проблемами, которые вы видите в своем примере. Напомним, что таблица является дочерним элементом, а не родительским контейнером. CSS наследуется от родителей, а не от детей. Поэтому вы должны убедиться, что BODY остается динамичным в настройке высоты.

обновление

Вот JSFiddle для мин высоты на теле; http://jsfiddle.net/uZCKn/1/ Для работы требуется высота HTML 100%. Получил это отсюда: min-height does not work with body

Единственное, что я могу придумать, это JavaScript, чтобы установить высоту боковых панелей или использовать искусственные столбцы. Но может быть что-то еще, чтобы получить левый/правый бар, чтобы заполнить его высоту контейнера, а также, что мне не хватает.

Есть пояснения.

источник

2012-02-22 16:14:01 jmbertucci

http://jsfiddle.net/6ZeLh/

Чтобы зафиксировать рост не пройдя весь путь вниз изменить body{height:100%} к min-height:100%. Если вам все равно, это не сработает в IE6. Чтобы исправить ваши списки, вы можете поплавки. Добавить position:relative в body, добавьте position:absolute к .leftbar, .rightbar и установите позиции следующим образом

.leftbar {left:0; top:0;} 
.rightbar {right:0; top:0;}

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

источник

2012-02-22 16:21:32 hradac

А, это хорошее решение. Сделайте абсолютное положение боковых стержней. – jmbertucci

Если вы используете поплавки, вы должны использовать clearfix. Пример (переполнение: скрытый в родительский DIV дать вам простую четкую FIX):

<div style="overflow: hidden;"> 
    <ul class="leftbar"> 
     <li>one</li> 
     <li>two</li> 
    </ul> 
    <ul class="rightbar"> 
     <li>alpha</li> 
     <li>beta</li> 
    </ul> 
</div>

Вы можете Google больше clearfixes, особенно для случая

источник

2016-03-19 08:38:14 Indevelop

удалить

html, body { height: 100%; }

и добавить

body { height: fit-content; }

Другая вещь - свидетельство о том, что нет дочернего div's что делает вещи меньше, чем это действительно должно быть.

источник

2017-11-07 14:27:53

'fit-content' - экспериментальное свойство, которое не должно использоваться в производственном коде в 2017 году. – TylerH

@TylerH вы можете разместить ссылку, чтобы узнать больше об этой проблеме? –

HTML тела меньше, чем его содержание

ответ

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