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

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

Mary-Kate Olsen

풀어 주다： 2024-11-02 09:07:02

원래의

655명이 탐색했습니다.

Why does a grid with 100% grid-template-columns extend beyond the body when using fixed positioning?

그리드 템플릿 열이 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

이전 기사：웹페이지에서 가로 스크롤을 실제로 비활성화하는 방법은 무엇입니까? 다음 기사：jQuery는 정말로 모든 CSS3 선택자를 지원합니까? :nth-last-child()와 그 너머의 미스터리.

본 웹사이트의 성명

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

저자별 최신 기사

에서 2024-04-29 11:01:01

2049

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

2204

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

1862

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

에서 2024-04-18 23:52:34

1749

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

1771