제공된 CSS 코드:
<code class="css">.parent { position: fixed; width: 100%; left: 0; top: 14px; display: grid; grid-template-columns: 40% 60%; grid-gap: 5px; background: #eee; }</code>
문제는 width: 100% 속성이 아니라 Grid-template-columns 설정에서 발생합니다. 백분율(40% 및 60%)과 그리드 간격(5px)을 지정하면 전체 너비가 100%를 초과합니다. 이로 인해 고정된 위치에 상위 컨테이너가 본문의 오른쪽 가장자리를 넘어 확장됩니다.
이 문제를 해결하려면 대신 분수 단위(fr)를 사용하는 것이 좋습니다. 그리드 템플릿 열 선언의 백분율입니다. 분수 단위는 정의된 간격을 고려하여 비례적으로 공간을 할당합니다.
<code class="css">.parent { ... grid-template-columns: 4fr 6fr; ... }</code>
예:
<code class="html"><div class='parent'> <div class='left'>LEFT</div> <div class='right'>RIGHT</div> </div></code>
이 수정을 통해 상위 컨테이너는 이제 신체 경계 내에서 완전히 표시됩니다. 고정되어 위치합니다.
위 내용은 그리드 템플릿 열에서 100% 그리드 표시가 본문을 초과하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!