어린이

Question

다음과 같이 뭔가를 오버 플로우가 발생하지 않는 수직 스크롤 부모 DIV 만들기 :

<div style="float: left; height: 20px; overflow-y: scroll"> 
    <div>hello this is a test</div> 
    <div>hello this is another test</div> 
    <div>t1</div> 
    <div>t2</div> 
    <div>t3</div> 
</div> 

부모 DIV가 (내가 원하는입니다) 가장 큰 아이에 맞게 적절한 폭으로 성장합니다. 그러나 세로 스크롤 막대를 사용하면 내부 너비가 더 작아 지므로 가장 큰 자식이 줄 바꿈됩니다.

부모가 가장 큰 어린이의 너비와 스크롤 막대의 너비로 자랄 수있는 방법이 있습니까? 내가 아는 모든 마술 트릭을 시도했지만 아무 것도.

Answer 1

하나의 해결책을 찾았지만 다른 제안이 있으면 열어보십시오. (모든 요소에 대한 가장 긴 아이가 어떤 것인지 확실 경우, 또는) 가장 긴 아이에게 오른쪽 플로트 아이를 추가함으로써

: 일부 수평 패딩 추가

<style type="text/css"> 
.stretcher { float: right; right: -50px; width: 50px; height: 1px; } 
</style> 

<div style="float: left; height: 20px; overflow-y: scroll"> 
    <div>hello this is a test</div> 
    <div>hello this is another test<div class="stretcher"></div></div> 
    <div>t1</div> 
    <div>t2</div> 
    <div>t3</div> 
</div> 

Answer 2

은 내 테스트에서 충분 IE6/7

<div style="float: left; height: 50px; overflow-y: scroll; padding: 0 50px 0 4px;"> 
    <div>hello this is a test</div> 
    <div>hello this is another test lorem ipsum</div> 
    <div>t1</div> 
    <div>t2</div> 
    <div>t3</div> 
</div> 

Answer 3

이전에 같은 문제가 있었지만 CSS를 사용하여 동적으로 요소 크기를 늘릴 수 있다고 생각하지 않습니다. 하지만 자바 스크립트를 사용하여 동적으로 높이를 조정할 수 있습니다.

jQuery에서는 부모 요소에 자식 요소를 추가하거나 제거 할 때마다 height() 메서드를 사용할 수 있습니다.

내 프로젝트 중 하나에서이 작업을했지만 여전히 Opera에 문제가있었습니다 (IE는 괜찮 았음).). Opera를 사용하는 고객이 많지 않기 때문에이 문제를 무시했습니다.

참고 : 귀하의 질문에 그냥 지나쳤습니다. 내가 당신의 문제를 제대로 이해하지 못했을 때 나를 바로 잡아주세요.