CSS를 사용하여 HTML에서 div 높이 설정

StackOverflow https://stackoverflow.com/questions/4973

  •  08-06-2019
  •  | 
  •  

문제

두 개의 열이 있는 테이블 형식의 페이지를 레이아웃하려고 합니다.가장 오른쪽 열을 페이지 오른쪽에 고정하고 이 열의 배경색이 뚜렷해야 합니다.오른쪽의 콘텐츠는 거의 항상 왼쪽의 콘텐츠보다 작습니다.오른쪽에 있는 div가 항상 아래 행의 구분 기호에 도달할 수 있을 만큼 충분히 커지기를 바랍니다.배경색이 그 공간을 채우도록 하려면 어떻게 해야 합니까?

.rightfloat {
  color: red;
  background-color: #BBBBBB;
  float: right;
  width: 200px;
}

.left {
  font-size: 20pt;
}

.separator {
  clear: both;
  width: 100%;
  border-top: 1px solid black;
}
<div class="separator">
  <div class="rightfloat">
    Some really short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>
<div class="separator">
  <div class="rightfloat">
    Some more short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>

편집하다:나는 이 예가 매우 테이블과 유사하며 실제 테이블이 좋은 선택이 될 것이라는 점에 동의합니다.하지만 내 "실제" 페이지는 결국 테이블과 같지 않게 될 것이므로 먼저 이 작업을 마스터하고 싶습니다!

또한 어떤 이유에서인지 IE7에서 게시물을 생성/편집할 때 미리보기 보기에는 코드가 올바르게 표시되지만 실제로 메시지를 게시하면 서식이 제거됩니다.Firefox 2에서 내 게시물을 편집하는 것이 효과가 있었던 것 같습니다. FWIW.

또 다른 편집:예, GateKiller의 답변을 수락하지 않았습니다.실제로 간단한 페이지에서는 잘 작동하지만 실제 무거운 페이지에서는 작동하지 않습니다.여러분이 지적한 링크 중 일부를 조사하겠습니다.

도움이 되었습니까?

해결책

에헴...

귀하의 질문에 대한 짧은 대답은 body 및 html 태그의 높이를 100%로 설정한 다음 페이지 높이를 100%로 만들려는 각 div 요소의 높이를 100%로 설정해야 한다는 것입니다.

실제로 100% 높이는 대부분의 디자인 상황에서 작동하지 않습니다. 이는 짧을 수 있지만 좋은 대답은 아닙니다.Google은 "모든 열이 가장 긴" 레이아웃을 사용합니다.가장 좋은 방법은 왼쪽 및 오른쪽 열을 래퍼 안에 넣는 것입니다. div, 왼쪽 및 오른쪽 열을 플로팅한 다음 래퍼를 플로팅합니다. 이렇게 하면 내부 컨테이너의 높이까지 늘어납니다. 그런 다음 외부 래퍼에 배경 이미지를 설정합니다.그러나 IE "이중 여백 부동 버그"가 발생할 경우 부동 요소에 수평 여백이 있는지 확인하십시오.

다른 팁

이것을 시도해 보십시오:

html, body,
#left, #right {
  height: 100%
}

#left {
  float: left;
  width: 25%;
}
#right {
  width: 75%;
}
<html>
  <body>
    <div id="left">
      Content
    </div>
    <div id="right">
      Content
    </div>
  </body>
</html>

일부 브라우저는 CSS 테이블을 지원하므로 다양한 CSS를 사용하여 이러한 종류의 레이아웃을 만들 수 있습니다. display: table-* 가치.Rachel Andrew가 쓴 이 기사(및 같은 이름의 책)에는 CSS 테이블에 대한 추가 정보가 있습니다. CSS에 대해 당신이 아는 모든 것이 잘못되었습니다

CSS 테이블을 지원하지 않는 이전 브라우저에서 일관된 레이아웃이 필요한 경우 다음 두 가지 작업을 수행해야 합니다.

  1. "테이블 행" 요소가 내부 부동 요소를 지우도록 만드세요.

    이를 수행하는 가장 간단한 방법은 다음과 같이 설정하는 것입니다. overflow: hidden 대부분의 브라우저를 관리하며 zoom: 1 트리거하기 위해 hasLayout IE 이전 버전의 속성입니다.

    부동 소수점을 제거하는 다른 방법이 많이 있습니다. 이 접근 방식으로 인해 바람직하지 않은 부작용이 발생하는 경우 질문을 확인해야 합니다. 'clearfix'의 어떤 방법이 가장 좋은가요? 그리고 기사 레이아웃이 있는 것에 대해 다른 방법의 경우.

  2. 두 "표 셀" 요소의 높이 균형을 맞춥니다.

    이에 접근할 수 있는 방법에는 두 가지가 있습니다."테이블 행" 요소에 배경 이미지를 설정하여 동일한 높이의 모양을 만들 수 있습니다( 가짜 기둥 기술) 또는 각각에 큰 패딩과 똑같이 큰 음수 여백을 제공하여 열의 높이를 일치시킬 수 있습니다.

    가짜 열은 더 간단한 접근 방식이며 하나 또는 두 열의 너비가 고정된 경우 매우 잘 작동합니다.다른 기술은 가변 너비 열(백분율 또는 em 단위 기반)에 더 잘 대처하지만 열 내의 콘텐츠(예:열이 포함된 경우 <div id="foo"></div> 그리고 당신은 링크를 걸었습니다 #foo)

다음은 열 높이의 균형을 맞추기 위해 패딩/여백 기술을 사용하는 예입니다.

html, body {
  height: 100%;
}

.row {
  zoom: 1;          /* Clear internal floats in IE */
  overflow: hidden; /* Clear internal floats */
}

.right-column,
.left-column {
  padding-bottom: 1000em;  /* Balance the heights of the columns */
  margin-bottom: -1000em;  /*                                    */
}

.right-column {
  width: 20%;
  float: right;
}

.left-column {
  width: 79%;
  float: left;
}
<div class="row">
  <div class="right-column">Right column content</div>
  <div class="left-column">Left column content</div>
</div>
<div class="row">
  <div class="right-column">Right column content</div>
  <div class="left-column">Left column content</div>
</div>

Natalie Downe의 이 Barcamp 데모는 열을 추가하고 적절한 간격과 패딩을 추가하는 방법을 알아낼 때 유용할 수도 있습니다. 동일한 높이 열 및 기타 트릭 (열 높이의 균형을 맞추기 위한 여백/패딩 트릭에 대해 처음 배운 곳이기도 합니다)

나는 엄격하게 CSS를 포기하고 약간의 jquery를 사용했습니다.

var leftcol = $("#leftcolumn");
var rightcol = $("#rightcolumn");
var leftcol_height = leftcol.height();
var rightcol_height = rightcol.height();

if (leftcol_height > rightcol_height)
    rightcol.height(leftcol_height);
else
    leftcol.height(rightcol_height);

다음은 동일한 높이 열의 예입니다. 동일한 높이 열 - 재검토

"Faux Columns" 아이디어도 확인해 보세요. 가짜 기둥

테이블 경로로 가지 마십시오.테이블 형식 데이터가 아닌 경우 테이블 형식 데이터로 취급하지 마세요.접근성과 유연성이 좋지 않습니다.

내 사이트에서도 같은 문제가 발생했습니다(뻔뻔한 플러그).

나는 탐색 섹션 "float:right"이고 페이지의 본문에는 오른쪽으로 정렬된 약 250px의 배경 이미지와 "repeat-y"가 있습니다.그런 다음 "clear:둘 다" 입니다.여기 W3Schools와 CSS 클리어 속성.

나는 "페이지" 분류 div의 하단에 클리어를 배치했습니다.내 페이지 소스는 다음과 같습니다.

body
 -> header (big blue banner)
 -> headerNav (green bar at the top)
 -> breadcrumbs (invisible at the moment)
 -> page
     -> navigation (floats to the right)
     -> content (main content)
         -> clear (the quote at the bottom)
         -> footerNav (the green bar at the bottom)
     -> clear (empty but still does something)
 -> footer (blue thing at the bottom)

도움이 되었으면 좋겠습니다 :)

자체 CSS를 작성할 필요가 없습니다. HTML 헤드 섹션에서 이를 호출하여 "Bootstrap css"라는 라이브러리가 있으며, 많은 스타일을 얻을 수 있습니다. 예는 다음과 같습니다.두 개의 열을 연속으로 제공하려면 다음을 수행하면 됩니다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
  <div class="col-md-6">Content</div>
  <div class="col-md-6">Content</div>
</div>

여기서 md는 중형 장치를 의미합니다. 소형 장치에는 col-sm-6을, 초대형 장치에는 col-xs-6을 사용할 수 있습니다.

귀하의 질문에 대한 짧은 대답은 body 및 html 태그의 높이를 100%로 설정한 다음 페이지 높이를 100%로 만들려는 각 div 요소의 높이를 100%로 설정해야 한다는 것입니다.

2열 레이아웃은 CSS에서 작업하기가 약간 어렵습니다(적어도 CSS3가 실용적일 때까지는).

왼쪽과 오른쪽으로 플로팅하면 한 지점까지 작동하지만 배경을 확장할 수는 없습니다.배경을 단색으로 유지하려면 "가짜 열"이라는 기술을 구현해야 합니다. 이는 기본적으로 열 자체에 배경 이미지가 없음을 의미합니다.2개의 열은 상위 태그 안에 포함됩니다.이 상위 태그에는 원하는 2개의 열 색상이 포함된 배경 이미지가 제공됩니다.이 배경을 필요한 만큼만 크게 만들고(단색인 경우 높이를 1픽셀로만 만들고) 반복되도록 합니다.AListApart는 작동하는 데 필요한 사항에 대한 훌륭한 연습을 제공합니다.

http://www.alistapart.com/articles/fauxcolumns/

2가지 옵션을 생각해 볼 수 있어요

  1. 페이지 로드 시 더 작은 열의 크기를 조정하려면 자바스크립트를 사용하세요.
  2. 다음을 설정하여 동일한 높이를 가짜로 만듭니다. background-color 컨테이너의 열에 대해 <div/> 대신에 (<div class="separator"/>) 와 함께 repeat-y

코드를 더 쉽게 읽을 수 있도록 여기서 도움을 드리고자 합니다.
상단에 있는 "101010" 버튼을 클릭하면 코드 조각을 삽입할 수 있다는 점을 기억하세요.코드를 입력한 다음 강조 표시하고 버튼을 클릭하세요.

예는 다음과 같습니다.

<html>
    <body>
    <style type="text/css">
        .rightfloat {
            color: red;
            background-color: #BBBBBB;
            float: right;
            width: 200px;
        }

        .left {
            font-size: 20pt;
        }

        .separator {
            clear: both;
            width: 100%;
            border-top: 1px solid black;
        }
    </style>

이것은 당신에게 도움이 될 것입니다:CSS에서 높이를 100%로 설정하세요. html 그리고 body 강요.그런 다음 필요에 따라 높이를 조정할 수 있습니다. div.

html {
    height: 100%;
}

body {
    height: 100%;
}
div {
    height: 100%; /* Set Div Height */
}

CSS 속성만 사용하면 충분합니다. width 그렇게 하려면.

예는 다음과 같습니다.

<style type="text/css">;
    td {
        width:25%;
        height:100%;
        float:left;
    }
</style>


.rightfloat {
  color: red;
  background-color: #BBBBBB;
  float: right;
  width: 200px;
}

.left {
  font-size: 20pt;
}

.separator {
  clear: both;
  width: 100%;
  border-top: 1px solid black;
}
<div class="separator">
  <div class="rightfloat">
    Some really short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>
<div class="separator">
  <div class="rightfloat">
    Some more short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top