Блог

Главная - Вопросы по программированию - Почему свойство CSS height не вычисляется должным образом для div с display:table, содержащего div с display:caption?

Почему свойство CSS height не вычисляется должным образом для div с display:table, содержащего div с display:caption?

#css

#css

Вопрос:

Я не могу понять, почему высота div #container вычисляется правильно с разрешением 200 пикселей, когда display:table-row применяется к div #header, и она слишком велика, когда display:table-caption применяется к div #header.

Я тестировал это в Chrome 35

Кто-нибудь знает, почему это так, и / или есть простое решение? (желательно без javascript или добавления дополнительных divs)?

Я хочу, чтобы высота div #header была такой же маленькой, как и его содержимое, а его ширина составляла 100% от div #container, а #container точно помещался в #main div.

jsfiddle: http://jsfiddle.net/2SKY4 /

CSS:

 #main {
    width: 200px;
    height: 200px;
    background-color:#ff0; 
}
#container {
    background-color: #0f0;
    width: 90%;
    display:table;
    height:100%;
}
#header {
    background-color:#F0F;
    display:table-caption;
}
#splitpanel {
    display:table-row;
    background-color:#0ff;
}
#leftpanel {
    background-color: #f00;
    overflow: scroll;
    display: table-cell;
}
#rightpanel {
    background: #00f;
    overflow: scroll;
    display: table-cell;
}

HTML:

 <div id="main">
    <div id="container">
        <div id="header">Header</div>
        <div id="splitpanel">
            <div id="leftpanel"></div>
            <div id="rightpanel"></div>
        </div>
    </div>
</div>

Ответ №1:

Я не уверен, чего вы хотите. скрипка уже имеет то, что вы хотите, кажется. вам лучше показывать снимки и говорить, что вы хотите. вы используете «отображение» разных типов, что также не имеет особого смысла. не могли бы вы описать, какую структуру вы хотите в snapshot?

Комментарии:

1. У двух столбцов «таблицы» нижние полосы прокрутки выступают из #main div. Я хочу, чтобы эти столбцы полностью находились внутри желтого reactangle.

2. Если вы измените атрибут отображения заголовка #на table-row, это будет сделано правильно, но тогда заголовок займет слишком много места по вертикали. Это минимальное повторение ошибки, которую меня попросили исправить, и на моей работе. Я бы хотел, чтобы решение было очень минимальным и без javascript, потому что это на странице, которая была расширена и расширена и уже создана для выполнения какого-то нечестивого волшебства. Я хотел бы сделать его проще, а не сложнее. 😉

3. неправильная структура является причиной, по которой она создает проблему. я не знаю значения всех стилей css, которые вы применили, и многие из них кажутся бесполезными. вы можете создать структуру, которую хотите, не используя такие стили css, если вы не понимаете, что они делают.

4. Теперь это не работает, потому что ваш заголовок занимает некоторую ширину, а ваша splitpanel пытается занять ширину 100%. поскольку заголовок — это заголовок, он не воспринимается как элемент, который занимает долю общей высоты таблицы, а splitpanel пытается занять 100% (200 пикселей), что приводит к его переполнению. рассмотрите это как обычное поведение браузера и измените свою структуру в соответствии с вашими потребностями.

Метки: