내부에 부유물을 사용하면서 div 높이를 높이는 방법

121

내부에 플로트가있을 때 div의 높이를 어떻게 늘릴 수 있습니까? 너비 값을 정의하고 오버플로를 숨겨진 작업으로 설정하는 것을 알고 있습니다. 문제는 오버플로가 표시된 div가 필요하다는 것입니다. 어떤 아이디어?

— Pedrozath
소스

278

overflow:auto;포함하는 div에서 내부의 모든 항목 (부동 항목 포함)이 표시되고 외부 div가 해당 항목을 완전히 둘러 쌉니다. 이 예를 참조하십시오.

.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}

<div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>

스 니펫 확장

— JakeParis
소스

7

네, 작동하지만 스크롤바를 생성 할 위험이 있습니다.

— pedrozath 2011 년

1

아니요, @pedro에 대해 아는 것은 아닙니다. 외부 div는 내부 div를 감싸기 위해 계속 확장되어야합니다. 바이올린에서 시도하고 내부 div의 크기를 늘리고 어떤 일이 발생하는지 확인하십시오.

— JakeParis 2011 년

2

나는 이것을 시도했고 약 2em 높이의 작은 스크롤 바가 브라우저 창 오른쪽에 나타났습니다.

— Nigel Alderton 2013 년

1

@NigelAlderton 컨테이너의 높이를 강요했기 때문에 이것이 나에게 일어났습니다 ( overflow추가 된 곳). 을 제거하여 고정 overflow: auto;클래스에서뿐만 아니라 height선택

— eggy

16

수레를 지우는 방법은 여러 가지가 있습니다. http://work.arounds.org/issue/3/clearing-floats/에서 일부를 확인할 수 있습니다
.

예, clear:both당신을 위해 일할 수 있습니다

#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom:1; }

— 니키타 리박
소스

1

이 접근 방식의 이점은 overflow: auto;요소 외부에서 오버플로되는 콘텐츠 (예 : 포커스 장식)를 클리핑하지만 그렇지 않다는 것입니다.

— Dan

overflow : auto가 나를 위해 수평 스크롤바를 만들어서 사용할 수 없었습니다. 이것은 완벽하게 작동했습니다.

— Edwin Stoteler

내가 찾던 바로 그것. 이 CSS를 부모에게 적용했습니다. 부모 <div>의 높이를 확장하여 부동 요소가 그 안에 남아 있도록합니다. 우아합니다. "부모의 바닥이 플로트를 제거해야합니다."라고 명확하게 명시되어 있기 때문입니다.

— IAM_AL_X

12

대부분의 경우 overflow: auto;충분하지만 완성 및 크로스 브라우저 지원을 위해 모든 브라우저에서 작업을 수행 할 Clearfix 를 살펴보십시오 .

다음 마크 업을 살펴 보겠습니다.

<div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>

다음 스타일과 함께 ..

.content { float:left; }

.clearfix { ..from link.. }

clearfix가 없으면 부모 div는 떠 다니는 자식이기 때문에 높이가 없습니다. clearfix는 부모가 플로팅 자식을 고려하게합니다.

— 미프
소스

2

Clearfix는 추가 마크 업입니다. 단순히 상위 div에 마크 업을 제공하십시오overflow: auto;

— JakeParis 2011 년

7

나는 그것을하는 좋은 방법 display: table은 div에 설정하는 것이라고 생각했습니다 .

— Pedrozath
소스