고정 위치 지정을 사용할 때 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

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

본 웹사이트의 성명

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

저자별 최신 기사

최신 이슈

function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...

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

0

2

1732

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

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

0

10

1887

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

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

0

1

1600

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

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

0

1

1511

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

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

0

0

1548

관련 주제

더>

• 폴더에 보안 옵션이 없는 문제를 해결하는 방법
• Word 단일 페이지가 용지 방향을 변경합니다.
• 컴퓨터 바로가기 키 컬렉션
• Wi-Fi에 할당된 IP가 없다고 표시됨
• 웹사이트의 데드 링크를 확인하는 방법
• Oracle 인덱스 유형은 무엇입니까?
• PS의 올가미 도구 유형은 무엇입니까?
• 웹 페이지에서 PHP를 여는 방법