CSS를 사용하여 동일한 높이 div를 사용하여

#container {
  overflow: hidden;
  width: 100%;
}

#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* for IE compatibility */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

는 여러 기술을 제공합니다. 한 가지 방법은 큰 바닥 패딩을 설정하고, 부정적인 바닥 마진을 가진 패딩을 부정하고, 숨겨진 오버플로가있는 컨테이너로 div를 둘러싸고 있습니다. 오버플로 : 숨겨진; 너비 : 100%; } #왼쪽 색 { 플로트 : 왼쪽; 너비 : 50%; 배경색 : 오렌지; 패딩-바닥 : 500EM; 마진 바닥 : -500EM; } #oright-col { 플로트 : 왼쪽; 너비 : 50%; 마진 오른쪽 : -1px; / * IE 호환성 */ 왼쪽 경계 : 1px 솔리드 블랙; 배경색 : 빨간색; 패딩-바닥 : 500EM; 마진 바닥 : -500EM; }

html에서 div 컨테이너와 두 개의 자식 divs를 만듭니다. 큰 바닥 패딩과 네거티브 마진은 서로를 취소하여 DIV가 필요한 수직 공간 만 차지할 수 있습니다. 숨겨진 오버 플로우가있는 컨테이너는 과도한 콘텐츠가 보이지 않도록합니다.

#container {
  overflow: hidden;
  width: 100%;
}

#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* for IE compatibility */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

결론

이 CSS 기술은 HTML/CSS에서 동일한 높이 플로팅 DIV를 생성하는 의미 적으로 올바른 방법을 제공합니다. 불필요한 마크 업을 도입하지 않고 테이블의 동작을 효과적으로 모방합니다.