CSS에서 높이를 적응적으로 만드는 방법

CSS에서 높이를 조정하는 방법: 1. "height:100%;display:table;" 스타일을 html 요소로 설정하고 "display:table-cell;height:100%;" 스타일을 신체 요소. 2. 플렉스 레이아웃을 사용하세요.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS 정적 페이지를 작성할 때 HTML 높이를 화면 높이에 맞추는 것은 일반적인 요구 사항입니다. 예를 들어 하단에 배치해야 하는 하단 버튼이 있는 경우 하단에 표시되어야 합니다. 콘텐츠가 한 화면 미만인 경우 화면 한 화면을 초과하는 경우 모든 콘텐츠 하단에 표시됩니다.

렌더링:

CSS 메서드

방법 1:

html {
  height: 100%;
  display: table;
}

body {
  display: table-cell;
  height: 100%;
}

방법 2: 플렉스 레이아웃 사용:

<div class="container">
  <header></header>
  <content></content>
  <footer></footer>
</div>

.container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header {
  background: #cecece;
  min-height: 100px;
}

content {
  background: #bbbbbb;
  flex: 1; /* 1 代表盡可能最大，會自動填滿除了 header footer 以外的空間 */
}

footer {
  background: #333333;
  min-height: 100px;
}

JS method

CSS를 수행하는 방법: 때로는 위치 지정 중에 문제가 발생할 수 있습니다. js를 사용하여 html의 높이를 동적으로 변경할 수 있습니다.

Zepto 기반

$(document).ready(function(){
  var windowHeight = $(window).height();
  if($(this).height() < windowHeight){
      $(this).height(windowHeight);
  }
});

native js

window.onload = function(){
  var winHeight = 0;
  if (window.innerHeight){
    winHeight = window.innerHeight;
  }else if ((document.body) && (document.body.clientHeight)){
    winHeight = document.body.clientHeight;
  }
  var html = document.getElementsByTagName('html')[0];
  if(document.body.offsetHeight < windowHeight){
      html.style.height = windowHeight;
  }
};

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요. 소개 프로그래밍! !

위 내용은 CSS에서 높이를 적응적으로 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!