업데이트:

최근 작업 중에 부모 요소의 min-height: 100% 값을 상속 받지 못하는 문제와 td 요소의 width 값이 적용되지 않는 문제를 겪었었다.

min-height: 100% 값을 상속 받지 못하는 문제

코드를 풀어보자면

1
2
3

<div class="wrap">
    <div class="box">ㅇㅇ</div>
</div>

부모 요소 wrap의 자식 요소 box가 부모의 min-height: 100% 값을 상속받지 못하는 상황이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

html, body {
    height: 100%;
}

.wrap {
    width: 200px;
    min-height: 100%;
    background-color: pink;

    .box {
        min-height: inherit;
        background-color: skyblue;
    }
}

See the Pen min-height issue by sel (@selucky) on CodePen.

검색을 좀 해본 결과 원인은 찾을 수 없었지만 해결책(다음 목록 참고)은 몇 개 건졌다.

  1. 부모 요소에 height: 1px 선언
    • height: 1px을 주면 min-height: 100%와 동일한 효과를 보이는 듯하다. Chrome, IE 9~11, Edge, Firefox, Opera에서 정상 작동함.
  2. 부모 요소에 position: relative 선언 및 자식 요소에 position: absolute 선언
    • 자식 요소가 절대 위치값을 가지면 min-height를 상속받는 것처럼 보인다. 작동 브라우저는 위와 같음.
  3. 부모 요소에 display: table 및 자식 요소에 display: table-cell 선언
    • table-cell의 유동적인 특성을 이용한 방법으로, 자식 요소에 min-height: inherit 선언 안해도 됨. 작동 브라우저는 위와 같음.
  4. 부모 요소에 display: flex 선언
    • flex 속성을 이용한 방법이다. 자식 요소에 마찬가지로 min-height: inherit 선언 안해도 됨. 예상했던대로(?) IE에서는 작동하지 않는데, flex 버그라고 한다. IE를 고려하지 않는다면 가장 깔끔한 방법인듯 싶음.

참고

Firefox에서 td 요소 width 값 미적용 문제

다음과 같은 table이 있다고 가정했을 때

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<table>
    <colgroup>
        <col span="4" style="width:25%;">
    </colgroup>
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

목적은 반응형에서 td 요소의 width 값을 48% 정도로 바꾸는 것임.

1
2
3
4
5
6
7
8
9
10
11

@media (max-width: 1200px) {
    tr {
        display: block;
    }

    td {
        display: block;
        float: left;
        width: 48%;
    }
}

See the Pen OJbPeYz by sel (@selucky) on CodePen.

문제는 Firefox 브라우저의 반응형에서 td 요소에 선언한 width 값이 적용되지 않는다.. 운이 안 좋은 건지 위 문제와 마찬가지로 검색을 해봐도 마땅한 답을 찾을 수 없어서 이리저리 만져본 결과, 원인은 다른 곳에 있었음을 알았다.

1

<col span="4" style="width:25%;">

table의 col 요소를 보면 width 값이 인라인 스타일로 들어가 있다. 혹시나 해서 col 요소에 width: auto !important; 선언을 해봤더니..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@media (max-width: 1200px) {
    col {
        width: auto !important;
    }

    tr {
        display: block;
    }

    td {
        display: block;
        float: left;
        width: 48%;
    }
}

Firefox에서도 정상 작동한다. 예전에 first-letter 속성 관련 문제도 그렇고 Firefox.. 너란 놈은 참.. 근데 IE와 Safari만 하겠냐만은..