Высота ячейки html: Атрибут height | htmlbook.ru

Leave a Comment / Html / By /

html — Высота таблицы на все оставшееся место

Вопрос задан

Изменён 7 лет 7 месяцев назад

Просмотрен 194 раза

В следующем каркасе:

<div></div>
<tableprompt"></div>

Нужно сделать так, чтобы menu и prompt имели фиксированную высоту и были расположены относительно таблицы сверху и снизу соответственно. А таблица занимала по высоте все оставшееся место. В данном случае высота равна высоте родительского блока.

Как осуществить определение высоты по оставшемся месту?
Пока, как вариант, сделал в таблице padding’и сверху и снизу, и соответствующие им отрицательные margin’ы. С виду — не костыль, но может есть другие способы?

  • html
  • css
  • вёрстка

Можно сделать без отрицательных

margin‘ов, если есть возможно добавить для родительского контейнера position отличный от static. Тогда для #menu и #prompt добавляем postion: absolute, а для таблицы добавляем padding‘и нужной высоты.

Пример http://codepen.io/anon/pen/xbNWMO

Но вариант лучше — это сделать #menu и #prompt частью таблицы, например: http://codepen.io/anon/pen/WbBJNm. Здесь не будет зависимости от высоты контента #menu и #prompt, плюсом еще вертикальное позиционирование.

Вариант лучше предыдущего — это переписать на блочную верстку (display: table\table-row\table-cell) или flex.

2

для html,body задать height:100%; и потом уже вашему блоку height:100%;

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Теги DIV с 100 % относительной высотой без изменения размера — Browsers

Twitter LinkedIn Facebook Адрес электронной почты

  • Статья
  • Чтение занимает 2 мин

Предупреждение

Устаревшее, не поддерживаемое классическое приложение Internet Explorer 11 (IE11) будет окончательно отключено в некоторых версиях Windows 10 в рамках выпуска обновления для системы безопасности Windows («B»), запланированного на 14 февраля 2023 г. Мы настоятельно рекомендуем настроить режим IE в Microsoft Edge и отключить IE11 до этой даты, чтобы в вашей организации не возникли проблемы с бизнесом.

Дополнительные сведения см. в разделе aka.ms/iemodefaq.

В этой статье описывается поведение, согласно которому размер тега DIV с относительной высотой 100 % не изменяется в Internet Explorer 9 или более поздней версии.

Исходная версия продукта: Internet Explorer 9 и более поздних версий
Исходный номер базы знаний:

2674902

Симптомы

В Internet Explorer 9 или более поздней версии используется таблица с абсолютной высотой и по крайней мере двумя ячейками в одной строке. Одна ячейка содержит текст, а другая — тег DIV с относительной высотой 100 %. Текст не помещается в заданную высоту, поэтому размер таблицы изменяется. Тег DIV остается на начальной абсолютной высоте таблицы и не будет изменяться автоматически.

Это поведение является конструктивным и применяется к стандартному режиму для всех поддерживаемых версий Internet Explorer 9 и более поздних версий.

Примечание.

Поведение может отличаться в режиме Quirks и эмуляции режима Quirks (QME) при использовании Internet Explorer 9 или более поздней версии.

Ниже приведен пример описанного выше поведения:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <body>
        <table border="1px">
            <tr>
                <td>
                    <p>
                        this text does not fit and will resize the table<br />this text does not fit and will resize the
                        table<br />
                        this text does not fit and will resize the table<br />this text does not fit and will resize the
                        table<br />
                    </p>
                </td>
                <td>
                    <div></div>
                </td>
            </tr>
        </table>
    </body>
</html>

Согласно спецификации W3 высота ячейки не будет влиять на высоту строки, и любая дополнительная высота должна идти к заполнению ячейки. Затем дочерний элемент ячейки должен разрешать свою процентную высоту относительно поля содержимого ячейки, которая не изменяется по высоте строки.

В соответствии с CSS 2.1 высота ячейки — это минимальная высота, необходимая для содержимого. Свойство ячейки height таблицы может влиять на высоту строки (см. выше), но не увеличивает высоту ячейки. Ячейки, которые меньше высоты строки, получают дополнительную верхнюю или нижнюю заполнение.

Дополнительные сведения см. в статье Определение совместимости документов.

html — CSS как сделать фиксированную высоту?

спросил

Изменено 3 года, 8 месяцев назад

Просмотрено 118 тысяч раз

 <таблица ячеек="0">
<тд>
    <диапазон>
    // имена здесь
    
    
.
  ..больше кода

Это не работает. Переполнение по-прежнему делает ячейку выше, высота добавляется к содержимому.

  • HTML
  • CSS

2

Лучшее решение — поместить div внутри ячейки с высотой:

 
  <дел>
      ...

Кстати, для чего нужен диапазон? Если вам это нужно только для стилизации, вы можете стилизовать ячейку напрямую.

0

Искомое свойство CSS: line-height . Вам просто нужно поместить его в , а не в содержащийся

вам не хватает строк таблицы

 
    
        <тд>
            <диапазон>
               // имена здесь

Я только изучаю веб-дизайн, так что я немного нуб.

Поскольку я также столкнулся с этой проблемой и некоторыми решениями, которые я не могу понять на своем уровне. Пока я пытался, я обнаружил, что высота ячейки автоматически регулируется содержимым элемента . Итак, что я сделал, так это поместил элемент
внутрь и зафиксировал его высоту. Каким бы ни был контент, высота фиксирована.

 <тд>
<дел>
.
.
.
.align{ высота: 200 пикселей; переполнение: прокрутка; ширина: 600 пикселей; }

1

У меня была такая же проблема. Вы можете использовать диапазон напрямую. Это лучший подход. TD/TR не соблюдает установленную высоту. Просто поместите класс в свой диапазон и добавьте CSS или просто примените его напрямую с атрибутом стиля.

 ДЛИННОЕ ИМЯ
.MyClass { // в файле CSS
    высота: 60 ​​пикселей;
    переполнение: скрыто;
}

или просто

 ДЛИННОЕ ИМЯ

Вы пытались установить высоту css для атрибута td, а не для атрибута html?

 <тд>
     // здесь имена

1

Перейдите с Div внутри td и с помощью css покажите точки для переполнения

 . box {
  ширина: 200 пикселей;
}

.clampMe {
  переполнение: скрыто;
  переполнение текста: многоточие;
  дисплей: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: вертикальный;
}

.clampMe: после {
  дисплей: нет;
} 
 


<голова>
  
  <скрипт src="script.js">

 


<тело>
  <граница таблицы="1">
    
      тест
      тест
    
    
      тест
      тест
    
    
      <тд>
        <дел>
          FASTag — это простая в использовании перезагружаемая метка, которая обеспечивает автоматическое взимание платы за проезд и позволяет вам пройти через пункт взимания платы, не останавливаясь для оплаты наличными. FASTag связан с предоплаченной учетной записью, с которой снимается соответствующая сумма дорожных сборов.
          вычитается. Метка использует технологию радиочастотной идентификации (RFID) и прикрепляется к лобовому стеклу автомобиля после активации учетной записи метки.
<тд>
testasdfasdfasd asdf asdf asdfas dffasdf asd

Используйте

 .yourClass {padding: 1pt 0 1pt 0;}

и отрегулируйте значения «1pt» (верхнее и нижнее) для необходимой высоты.

Почему-то

 заполнение 0;

не работает.

Я бы написал

 
...

0

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — Установка максимальной высоты для содержимого ячейки таблицы

Задавать вопрос

спросил

Изменено 2 года, 3 месяца назад

Просмотрено 145 тысяч раз

У меня есть таблица, которая всегда должна занимать определенный процент высоты экрана. Большинство строк имеют фиксированную высоту, но у меня есть одна строка, которая должна растягиваться, чтобы заполнить доступное пространство. В случае, если содержимое ячейки в этой строке выходит за пределы желаемой высоты, я хочу, чтобы содержимое обрезалось с помощью overflow:hidden.

К сожалению, таблицы и строки не учитывают свойство max-height. (Это в спецификации W3C). Когда в ячейке слишком много текста, таблица становится выше, вместо того, чтобы придерживаться указанного процента.

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

Я пробовал использовать div, но не могу найти волшебную формулу. Если я использую элементы div с display:table, :table-row и :table-cell, элементы div ведут себя как таблица.

Любые подсказки о том, как я могу смоделировать свойство max-height для таблицы?

 <голова>
    <стиль>
        стол {
            ширина: 50%;
            высота: 50%;
            интервал между границами: 0;
        }
        тд {
            граница: 1px сплошной черный;
        }
        . headfoot {
            высота: 20 пикселей;
        }
        #содержание {
            переполнение: скрыто;
        }
    

<тело>
<таблица>
    заголовок
    
        <тд>
        <дел>
            поместите сюда много текста
нижний колонтитул
  • HTML
  • CSS
  • HTML-таблица

3

Просто поместите метки в div внутри TD и укажите высоту и переполнение.. как показано ниже.

 <таблица>

  
Образец

  
Текст

  
Здесь

3

Наконец-то мы нашли своего рода ответ. Во-первых, проблема: размер таблицы всегда зависит от содержимого, а не для того, чтобы содержимое помещалось в таблицу. Это ограничивает ваши возможности.

Мы сделали это, установив для div содержимого значение display:none, задав размер самой таблицы, а затем в javascript задав высоту и ширину div содержимого равными внутренней высоте и ширине закрывающего тега td. Показать содержимое div. Повторите процесс при изменении размера окна.

1

Возможно, не кросс-браузерный, но мне удалось получить это: http://jsfiddle.net/QexkH/

в основном для этого требуются верхний и нижний колонтитулы фиксированной высоты. и это абсолютные позиции в таблице.

 таблица {
        ширина: 50%;
        высота: 50%;
        интервал между границами: 0;
        положение: абсолютное;
    }
    тд {
        граница: 1px сплошной черный;
    }
    #содержание {
        положение: абсолютное;
        ширина:100%;
        слева: 0px;
        верх: 20 пикселей;
        внизу: 20 пикселей;
        переполнение: скрыто;
    }

3

Что я нашел !!!, В таблицах CSS td{height:60px;} работает так же, как CSS td{min-height:60px;}

Я знаю ситуацию, когда высота ячеек выглядит плохо. Это решение javascript не требует скрытого переполнения.

Для ограничения максимальной высоты всех ячеек или строк в таблице с помощью Javascript:

Этот скрипт хорош для таблиц с горизонтальным переполнением.

Этот скрипт каждый раз увеличивает ширину таблицы на 300 пикселей (максимум 4000 пикселей), пока строки не сократятся до max-height(160px) , и вы также можете редактировать числа по своему усмотрению.

 var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth;
в то время как (строка = table.rows[i++]) {
    в то время как (row.offsetHeight > 160 && j < 4000) {
        j += 300;
        table.style.width = j + 'px';
    }
}

Источник: HTML Table Solution Максимальный предел высоты для строк или ячеек путем увеличения ширины таблицы, Javascript высоту до цели и добавляет три точки

0

У меня была такая же проблема с компоновкой таблицы, которую я создавал. Я использовал решение Джозефа Марикла, но сделал так, чтобы оно работало и для FireFox, и добавило стиль строки таблицы для хорошей меры. Чистое решение CSS, поскольку использование Javascript для этого кажется совершенно ненужным и излишним.

HTML

 

    <дел>
        <дел>
            <дел>
                содержание здесь
            

            <дел>
                <дел>
                    здесь много контента