부모의 높이가 '100vh'로 설정되어 있어도 자식 요소는 뷰포트 높이에 포함되지 않습니다.

debugcn 에 게시 Dev

예측할 수없는

.parent{
  background: #64B5F6;
  height: 100vh;
  display: grid;
  grid-template-columns: 40% 60%;
}

.child1 {
  background: #42A5F5;
  height: 100%;
}

.child2{
  background: #FFEB3B;
  height: 100%;
}

.img1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class='parent'>
  <div class='child1'>
    <img class='img1'src="https://images.unsplash.com/photo-1597594879431-8aecf7c2dd49?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="man image">
  </div>
  <div class='child2'>
    <img class='img2'src="https://images.unsplash.com/photo-1598505628759-67b9346af31c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="man image">
  </div>
</div>

위의 코드에서 부모 height를 100vh. 즉, 뷰포트의 높이에 포함되어야합니다. 그러나 자식 요소가이 높이를 확장하고 있습니다. 나는 이것을 codepen.io 내에서 실행했고 부모가 이제 height뷰포트가 아니라 그 이상임을 알았 습니다. 나는 내가 여기서 뭘 잘못하고 있는지 모른다.

FluffyKitten

잘못된 것은 body요소의 기본 여백이 8px이므로 높이에 16px가 추가된다는 것입니다.

즉, 수정하려면 여백을 0으로 설정하면되므로 CSS 시작 부분에 다음을 추가하십시오.

body { margin:0;}

작업 예 :

body { margin:0;}

.parent{
  background: #64B5F6;
  height: 100vh;
  display: grid;
  grid-template-columns: 40% 60%;
}

.child1 {
  background: #42A5F5;
  height: 100%;
}

.child2{
  background: #FFEB3B;
  height: 100%;
}

.img1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class='parent'>
  <div class='child1'>
    <img class='img1'src="https://images.unsplash.com/photo-1597594879431-8aecf7c2dd49?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="man image">
  </div>
  <div class='child2'>
    <img class='img2'src="https://images.unsplash.com/photo-1598505628759-67b9346af31c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="man image">
  </div>
</div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

부모의 높이가 '100vh'로 설정되어 있어도 자식 요소는 뷰포트 높이에 포함되지 않습니다.

부모의 높이가 '100vh'로 설정되어 있어도 자식 요소는 뷰포트 높이에 포함되지 않습니다.

100vh 높이의이 div가 전체 뷰포트를 덮지 않는 이유는 무엇입니까?

하나의 100vh 높이 div는 3 개의 div를 포함하며, 두 번째는 가변 높이를 가진 유일한 것이어야합니다.

부모 높이에는 절대 위치에있는 자식이 포함되지 않습니다.

css 100vh가 div를 100 % 높이로 설정하지 않습니다.

왜 자식 요소 <img />가 부모 div 너비와 높이에 포함되지 않습니까?

요소의 높이를 뷰포트에서 사용 가능한 높이로 설정 하시겠습니까?

부모 요소에 최소 높이 값이 있지만 높이 값이없는 경우 자식 요소의 높이 : 100 %가 적용되지 않는 이유는 무엇입니까?

너비가 100 %로 설정되어 있어도 요소가 과부에 맞게 늘어나지 않습니다.

식별자 'title'이 정의되지 않았습니다. '{}'에는 이러한 멤버 각도 8이 포함되어 있지 않습니다.

100vh는 열을 100 % 높이로 만들지 않습니다.

높이를 100vh로 설정해도 작동하지만 모바일 브라우저에서 스크롤 막대가 나타납니다.

CSS 뷰포트 높이 : 100vh가 div의 콘텐츠에서 올바르게 작동하지 않습니다.

고정 위치를 사용하지 않고 부모 높이를 100VH로 유지하면서 div를 부모 div의 하단에 정렬합니다.

세로 뷰포트 가져 오기는 열 내부의 ListView를 사용하여 제한되지 않은 높이가 지정되었습니다

문자열에 배열의 특정 요소가 포함되어 있지만 다른 요소는 포함되어 있지 않은지 확인하는 방법

부모 높이가 고정되지 않은 경우 자식 요소를 부모 높이로 제한

스팬 요소 높이를 100 %로 설정하는 동안 부모 Div 높이로 설정되지 않습니다.

CSS 스타일링, 100 % / 100vh는 패스 뷰 높이를 커버하지 않습니다.

상위 요소가 높이 100 % 인 경우에도 Div가 100 % 높이가되지 않습니다.

에 대한 C # 정규식에는 이것과 저것 모두 포함되어 있지 않습니다.

Visual Studio 2019 새 프로젝트에는 SSIS가 포함되지 않고 설치되어 있습니다.

Focusable이 true로 설정되어 있어도 MouseDown 및 KeyDown 이벤트가 모두 발생하지 않습니다.

Google 장소 세부 정보에 이벤트가 포함되어 있지 않습니다.

오버플로가있는 부모 내부에서 자식 요소를 가장 높은 형제의 높이로 조정하는 방법 :

최소 높이가 100 % 인 컨테이너의 자식으로 최소 높이를 100 %로 설정합니다.

왼쪽 조인 쿼리에 집계 함수의 일부로 지정된식이 포함되어 있지 않습니다.

MS-Access : 쿼리에 집계 함수의 일부로 지정된식이 포함되어 있지 않습니다.

정규식 확인 문자열에 지정된 것 이외의 문자가 포함되어 있는지 여부

정규식 확인 문자열에 지정된 것 이외의 문자가 포함되어 있는지 여부