HTML-метка для заполнения высоты ячейки с некоторой формой заполнения

Question

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

Я пробовал метод, который нашел в своих поисках, но, похоже, он не работает... вот мой CSS:

tr {
    height: 1px;
}

td {
    height:100%;        
}

label {
    background-color: #DCDCDC;
    display: block; 
    font-weight:bold;
    vertical-align:top;
    text-align:right;  
    padding: 8px 5px 8px 8px;
    margin:  1px 3px 1px 0px;     
    min-width: 120px;
    min-height:100%;    
    height:auto !important;
    height:100%;
}

Любая помощь с этим будет признательна

Answer 1

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

td {padding: 0;}
label {display: block; padding: 1em;}

, кажется, помогает мне: http://jsfiddle.net/Fb7bS/

Но более сложные таблицы и / или унаследованные стили из других мест могут добавить сложности.

Answer 2

Ну, в старых браузерах метка не может быть установлена ​​как элемент уровня блока. Вы можете попробовать разместить div внутри метки и перенести стили метки в div и посмотреть, решит ли это вашу проблему.

Хотя для того, чтобы height: 100% работал, элемент должен быть абсолютно позиционирован, а родительский элемент относительно позиционирован, но в некоторых браузерах элементы таблицы, такие как td, также не могут быть относительно позиционированы. Кроме того, если td не предназначен для заполнения всей длины экрана по вертикали, height: 100% на обоих элементах в любом случае не требуется.

Я удалил часть «ненужного» кода и немного изменил ваш формат здесь, хотя я не уверен, что именно вы хотели, так что может оказаться, что это не так уж и ненужно, а что-то еще просто пропало: http://jsfiddle.net/mGykJ/1/

Не могли бы вы увидеть, что это больше похоже на то, что вы имели в виду? Хотя, если бы вы могли опубликовать свой HTML, это было бы полезно.

Answer 3

Hy, Я пришел к этой проблеме давным-давно. Кажется, что своего рода веб-браузеры добавляют в таблицы стандартный padding и margin .
Сколько они добавляют, всегда зависит от веб-браузера.
Но чтобы преодолеть эту проблему, вы должны рассмотреть метод css reset .
Что это?
Вы просто добавляете файл .css, который вы включаете в свою HTML-страницу, который устанавливает все поля / отступы и другие формирования, сделанные по умолчанию, на ноль. С этим вы избежите таких проблем. Там идет ссылка для CSS Reset: http://meyerweb.com/eric/tools/css/reset/