고정 위치 지정을 사용할 때 100% 그리드 템플릿 열이 포함된 그리드가 본문 너머로 확장되는 이유는 무엇입니까?

그리드 템플릿 열이 100%인 경우 그리드가 본문을 초과합니다.

그리드 템플릿 열이 100%인 디스플레이 그리드가 확장되는 이유는 무엇입니까? 위치가 고정으로 설정된 경우 본문을 벗어나나요?

문제:

다음 CSS 및 HTML을 고려하세요.

< ;pre class="snippet-code-css lang-css Prettyprint-override">.parent {
위치:고정;
너비:100%;
왼쪽:0;
위쪽:14px ;
디스플레이:그리드;
그리드-템플릿-열:40% 60%;
그리드-갭:5px;
배경:#eee;
}
.left {
테두리:2px 단색 빨간색;
}
.right {
테두리:2px 단색 빨간색;
}

<div class='parent'><br> <div class='left'>LEFT</div><br> <div class='right'> RIGHT</div><br></div>

위치가 고정되지 않은 경우 그리드가 올바르게 표시됩니다. 그러나 위치를 고정으로 설정하면 그리드가 오른쪽 몸체 너머로 확장됩니다.

해결책:

문제는 너비가 100%가 아니라 너비에 있습니다. Grid-template-columns 속성을 사용합니다. 백분율과 고정 그리드 간격을 사용하면 사용 가능한 공간의 100%를 초과합니다.

대신 fr 단위를 사용하여 그리드 간격을 고려하여 여유 공간을 비례적으로 분배합니다.

.parent {<br> 위치:고정;<br> 너비:100%;<br> 왼쪽:0 ;<br> 상단:14px;<br> 디스플레이:그리드;<br> 그리드-템플릿-열:4fr 6fr;<br> 그리드-갭:5px;<br> 배경:#eee;<br>}<br>.left {<br> 테두리:2px 단색 빨간색;<br>}<br>.right {<br> 테두리:2px 단색 빨간색;<br>}

<div class='parent'><br> <div class='left'>LEFT</div><br> <div class= 'right'>RIGHT</div><br></div>

fr 단위를 사용하면 그리드가 이제 공간을 올바르게 분배합니다. , 신체 경계 내에 유지되도록 합니다.

위 내용은 고정 위치 지정을 사용할 때 100% 그리드 템플릿 열이 포함된 그리드가 본문 너머로 확장되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html using class Property JS console display position border background issue

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：웹페이지에서 가로 스크롤을 실제로 비활성화하는 방법은 무엇입니까?다음 기사：웹페이지에서 가로 스크롤을 실제로 비활성화하는 방법은 무엇입니까?

관련 기사

더보기

• Spans에 `float: right`를 사용할 때 HTML 순서를 유지하는 방법은 무엇입니까?
• 백분율 값을 사용하여 div 내에 시각적으로 매력적인 삼각형을 만드는 방법은 무엇입니까?
• SELECT 및 OPTION 마크업을 사용하여 Google 번역을 웹사이트에 통합하는 방법은 무엇입니까?
• 최적화된 웹사이트 성능을 위해 대용량 CSS 파일 로드를 연기하는 방법은 무엇입니까?
• CSS 애니메이션에서 표시 속성과 불투명도 속성을 원활하게 전환하는 방법은 무엇입니까?