CSS는 -

Question

jsFiddle FIELDSET 부모의 외부 넘쳐 사업부 : https://jsfiddle.net/0q3ega2n/

나는 손실 비트에서 현재 해요. 전설에 선택 상자가있는 fieldset을 가지고 있으며 동적으로 내 fieldset 내에서 내용을 업데이트하기 위해 만들어졌습니다. 레이아웃을 위해 필드 세트는 200px의 높이로 고정됩니다.

문제가 발생하는 곳에서는 콘텐츠가 오버플로되는 경우 스크롤 막대를 필드 집합에 추가하는 것입니다. legend 태그도 스크롤하기 때문에 필드 세트 자체에 overflow: auto을 사용할 수 없습니다. 일부 다른 답변은 콘텐츠 래퍼 div을 사용하여 내가 한 스크롤바를 추가 할 것을 제안했습니다.

그러나 나는 아직도 내가 원하는 곳이 아니다. 오버플로가 발생하도록 div 래퍼에 대해 height 특성을 지정해야합니다. 100 %로 설정하면 상자 밖에서 텍스트가 계속 오버플로됩니다 (오버플로가 설정되지 않은 경우가 아닐지라도). 92 %로 설정하면 내가 하지만 92 %가 임의로 선택하고 그 결과를 잘 느끼지 않는다 (플러스 나는 크로스 브라우저 호환성에 대한 약간 걱정) 원하는 정확히 꽤 많이

CSS :

* { 
    font: 12pt Verdana; 
} 

fieldset.metrics { 
    height: 200px; 
} 

div.metrics-wrapper { 
    width: 100%; 
    height: 92%; 
    overflow: auto; 
} 

HTML : 그것은

<fieldset class='metrics'> 
    <legend> 
    Fieldset Title, with a 
    <select> 
     <option selected='selected'>select box</option> 
    </select> 
    </legend> 
    <div class='metrics-wrapper'> 
    <p> 
     Content goes here 
    </p> 
    </div> 
</fieldset> 

Answer 1

metrics-wrapper은 여전히 ​​넘쳐 metrics 가 추가 overflow: hidden 수정

fieldset.metrics { 
    height: 200px; 
    overflow: hidden; 
}