CSS 표시 : 표 최소 높이가 작동하지 않음

104

누구든지 내가 최신 브라우저에서 최소 높이 작업을 할 수 있다는 것을 알고 있습니까? CSS 테이블을 사용하고 있는데 최소 높이를 무시하는 것 같습니다.

<div style="background-color: red; display: table; min-height: 100px;">
abc
</div>

깡깡이

css

— 사만다 JT 스타
소스

1

비슷한 게시물 : stackoverflow.com/questions/25238/100-min-height-css-layout

— diEcho

1

CSS 테이블 을 정의 할 수 있습니까 ? 마크 업이 있습니까?

— 알렉스

1

귀하의 html, 해당 CSS를 게시하고 가능하면 귀하의 사이트에 대한 링크를 제공하십시오 (또는 jsfiddle.net 구축을 시도 하십시오).

— oezi

이 버그는 14 년 동안보고되었지만 여전히 FireFox의 문제입니다. bugzilla.mozilla.org/show_bug.cgi?id=307866

— 프레데릭

204

테이블을 사용할 때 테이블이 항상 늘어나 기 때문에 높이는 기본적으로 최소 높이입니다. "min-"을 제거하면 예상대로 작동합니다.

— swider
소스

13

이것은 완전히 직관적이지 않지만 실제로 적용됩니다. 최상의 결과는 가장 안쪽 display: table-cell요소 에 "고정"높이를 두는 것 입니다.

— eternicode

4

나는 IE에서 테스트하지 않았지만 Firefox가 여전히 이것에 영향을받는 유일한 것 같습니다.

— Dex

2

Mac의 Chrome 37, Safari 7 및 FF 32에서 height작동하고 작동 min-height하지 않는지 확인했습니다 . Win 8.1의 IE11은 둘 다에서 올바른 동작을 제공합니다. jsfiddle.net/nuwcyvwn/1

— 스테판 뮬러

1

사실이 아니다. 표의 높이가 8 인치 이상이고 (인쇄 제어를 위해 css를 사용함) 채우기에 충분한 행이 부족하지만 정의 된 tfoot이있는 경우 스페이서 행을 제공 할 수 있습니다 (수직으로 늘릴 수 있음). 내 다른 행의 높이는 그들이하지 않도록하고 내가 얻는 것은 바닥 글이 있어야 할 곳에 유지되는 큰 간격입니다. Chrome에서는 잘 작동하지만 사용중인 FF 또는 PDf 변환기는 아닙니다. wkhtmltopdf. 예, 높이는 작동하지만 의미 상 최소 높이와 동일한 의미는 아닙니다.

— rainabba

7

height: 1px;테이블 또는 모든 값에 사용하십시오 . 기본적으로 테이블이 min-height. min-height파이어 폭스의 테이블 에서만 작동하지 않습니다.

— virajs0ni
소스

4

OP는 최신 브라우저에서 작동하는 방법을 묻습니다. 나는 그에게 해결책을 주었다. 어떻게 정확하지 않습니까?

— virajs0ni

높이와 같은 일부 높이를 줄 : 1 x 1 픽셀을 당신이 말한대로, 그것은 일을 시작

— 모하메드 후세인을

1

사용 때마다 display:table;또는 같은 어떤 깊은 속성은 display:table-cell;사용을 고려 height대신 min-height. 테이블 높이 = 최소 높이에서와 같이 자동 범위 기능을 고려합니다.

— 아마드 아 와이스
소스

1

Firefox 용 솔루션

최소 높이 설정을 잠금 해제하려면 높이 추가

div {
    display: table;
    width: 100%;
    height: 0;
    min-height: 100px;
}

높이의 숫자는 예상대로 작동하도록하기 위해 최소 높이보다 작거나 같은 다른 실제 값일 수 있습니다.

— 마이크 윈체스터
소스