CSS를 사용하여 높이 적응 문제 해결

저는 적응성이 높은 문제를 해결하기 위해 js를 사용하는 것에 매우 거부감을 느낍니다. 왜냐하면 유지 관리가 쉽지 않고 충분히 자연스럽지 않기 때문입니다. 그러나 아래에서 설명할 예와 같이 순수 CSS를 사용하는 것은 쉽지 않습니다.

요구 사항:

1. 이 직사각형의 높이는 브라우저 창의 높이와 동일하며, 세로 스크롤 막대가 나타날 수 없습니다.

2. 녹색 부분은 50px로 고정

3. 보라색 부분을 남은 높이로 채웁니다

HTML 구조는 다음과 같습니다.

nav

content

먼저 보세요 1.

html, body {

height: 100%;

margin: 0px;

패딩: 0px;

}

#main {

background-color: #999;

높이: 100%;

}

요구사항 2도 매우 쉽습니다:

#nav {

background-color: #85d989;

height: 50px;

}

요구 사항 3 예 가장 문제가 되는 점은 일반적으로 높이:100%를 생각하지만 100%는 상위 요소의 높이를 기준으로 한다는 것입니다. 상위 요소는 300px이고 #nav는 50px를 차지하며 #content는 250px이어야 하는데 height: 100%로 작성하면 #content의 높이도 300%가 되고 그렇지 않은 세로 스크롤 막대가 나타납니다. 요구 사항에 따라 허용됩니다.

물론 이런 문제를 해결하려면 js를 사용하는 것이 꽤 간단하지만 이번에는 js를 사용하고 싶지 않으므로 아래에서 시도해 보겠습니다.

이번 요구 사항은 다음과 같습니다. 정말 무너지네요. 간단한 것 같으나 n가지 방법을 시도한 결과 모두 신뢰할 수 없다는 느낌이 들었습니다. 마침내 다음과 같이 이상적인 효과에 가장 가까운 방법을 찾았습니다.

html, body {

높이: 100%;

여백: 0px;

패딩: 0px;

}

#main {

배경색: #999;

높이: 100%;

}

#nav {

배경색: #85d989;

너비: 100%;

높이: 50px;

부동 소수점: 왼쪽;

}

#content {

background-color: #cc85d9;

height:100%;

}

여기에는 플로팅이 사용되었으며 최종 결과는 괜찮아 보입니다. 텍스트와 그림을 표시하는 방법은 충분하지만 js를 사용하여 상호 작용을 수행하려는 경우, 예를 들어 #content 내부로 드래그해야 하는 요소가 있는 경우 해당 요소의 최고 최소값은 0이 아니어야 합니다. , 그렇지 않으면 #nav 에 의해 차단됩니다. 비극은 나에게 그런 필요성이 있었기 때문에 계속 노력했습니다.

하루 종일 노력하고 전문가의 조언을 받은 끝에 마침내 해결책을 찾았습니다.

#nav {

background-color: #85d989;

너비: 100%;

높이: 50px;

}

#content {

background-color: #cc85d9;

너비: 100%;

위치: 절대;

위쪽: 50px;

아래쪽: 0px;

왼쪽: 0px;

}

상단과 하의를 함께 사용하는 것이 핵심입니다. 박스 모델의 영역을 강제로 정의할 수 있는 매우 파격적인 사용법입니다.

위 내용은 CSS를 사용하여 높이 적응 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!