CSS 높이 차이 : 100 % vs 높이 : 자동

167

나는 "무엇은 CSS의 차이라고 인터뷰에서 질문을했다 height:100%하고 height:auto?"

아무도 설명 할 수 있습니까?

css

— 구식
소스

236

height: 100% 부모 컨테이너의 높이를 100 %로 설정합니다.

height: auto 요소 높이는 자식의 높이에 따라 달라집니다.

다음 예를 고려하십시오.

높이 : 100 %

<div style="height: 50px">
    <div id="innerDiv" style="height: 100%">
    </div>
</div>

#innerDiv ~ 할 것이다 height: 50px

높이 : 자동

<div style="height: 50px">
    <div id="innerDiv" style="height: auto">
          <div id="evenInner" style="height: 10px">
          </div>
    </div>
</div>

#innerDiv ~ 할 것이다 height: 10px

— 매니쉬 미스 라
소스

5

자동 #innerDiv이 될 것입니다 : 나는 '높이의 경우라고 생각 10px + the size it needs for its own content이 볼 - jsfiddle

— BornToCode

@Manish Mishra : 최고의 반응 형 디자인은 무엇입니까? 자식 요소 또는 컨테이너 요소의 높이를 설정하고 다른 요소가 높이를 얻도록 허용?

— John Strood

@Djack은 다양한 화면에서 디자인에서 기대하는 모양, 느낌 및 동작에 따라 달라지며 CSS를 작성합니다. 와 같은 일반적인 전역 규칙은 없습니다 setting the height of the child element or the container element. 특정 일관성을 유지하고 복제를 피하고 재 작업을 줄이며 공통 레이아웃을 그룹화하면 디자인을 달성하기 위해 필요한 모든 작업을 수행 할 수 있습니다. 요컨대, 여러분의 작업에 대한 시스템 / 패턴이 있어야 읽고 쉽게 읽을 수 있으며, 물론 그것이 작동한다는 사실도

— Manish Mishra

2

나는 자동에 대해 생각하는 좋은 방법은 당신이 '설정을 해제'하는 것입니다-그것은 설정하지 않은 것과 같습니다.

— niico

1

나는 BornToCode가 위에서 공유 한 바이올린을 수정하여 auto요소가 그 내용과 자녀의 내용 모두에 맞게 증가하도록합니다. 반대로 고정 높이 값은 선언 된 높이에 맞지 않는 내용을 늘리거나 표시하지 않습니다. jsfiddle.net/m3f8y6xr/1 이 답변은 요소가 자체 텍스트이든 자녀의 컨텐츠이든 모든 내용을 포함하도록 자라게 할 정도로 충분히 말로 표현되지 않았다고 생각합니다. 물론 자체 텍스트도 어린이라고 주장 할 수 있습니다. 이를 통해 동작을 시각적으로 확인할 수 있습니다.

— SherylHohman

5

100 %의 높이 에 대한이며, 아마도, 당신의 높이 브라우저의 창 안쪽 은 IS 그 때문에, 부모의 높이 페이지. auto높이 될 것입니다 최소 높이 의 포함 할 필요 .

— 로 히트 아자 드
소스

3

이것은 부모 요소가 브라우저의 창 크기에 맞지 않는 정의 된 높이 일 경우 반드시 정확하지 않습니다

— goonerify

1

기본값은 height: auto브라우저에 있지만 height: X%높이를 포함하는 블록의 백분율로 정의합니다.

— 바히드 헤이 다린 자드
소스

0

height : 100 %는 부모 컨테이너에 지정된 height 속성이 있으면 작동하지 않습니다.

— 추쿠에 메카
소스