집 >웹 프론트엔드 >CSS 튜토리얼 >``컨테이너가 항상 전체 화면을 채우도록 만드는 방법은 무엇입니까?

``컨테이너가 항상 전체 화면을 채우도록 만드는 방법은 무엇입니까?

Susan Sarandon원래의: 2024-12-07 14:00:22919검색

How to Make a `` Container Always Fill the Entire Screen?

전체 화면

을 보장하는 방법 콘텐츠 크기에 관계없는 컨테이너

전체 화면

다양한 콘텐츠 크기를 포함하는 컨테이너는 어려울 수 있습니다. 그러나 원하는 결과를 일관되게 제공하는 안정적인 솔루션이 있습니다.

해결책:

다음 HTML 및 CSS 코드는 일관된 전체 화면

컨테이너:

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }
        
        #wrapper {
            min-height: 100%; 
        }
    </style>
</head>

<body>
    <div>

CSS 분석:

html, body: 높이를 100%로 설정하고 여백을 제거하여 컨테이너가 전체를 차지하도록 합니다. screen.
#wrapper: 최소 높이를 100%로 설정하여 수직으로 확장되도록 합니다.

호환성:

이 솔루션은 IE를 포함한 모든 주요 브라우저에서 잘 작동합니다. IE 6 이하에서 최적의 표시를 위해 추가 CSS 규칙이 포함됩니다.

<!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
<![endif]-->

사용:

문서에 HTML 및 CSS 코드를 포함하기만 하면 됩니다. 및 모든

ID가 "wrapper"인 요소는 콘텐츠 크기에 관계없이 수직으로 확장되어 전체 화면을 차지합니다.

위 내용은 ``컨테이너가 항상 전체 화면을 채우도록 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html if for include this display margin

성명：

이전 기사：jQuery를 사용하여 요소의 CSS 변환에서 회전 값을 추출하려면 어떻게 해야 합니까?다음 기사：jQuery를 사용하여 요소의 CSS 변환에서 회전 값을 추출하려면 어떻게 해야 합니까?