고정 된 높이의 Div

예전 코드를 작업하고 있으므로 더 많은 구조적 변경 (예 : 테이블 제거)을 할 수 없으므로 회신 할 때 유의하시기 바랍니다.고정 된 높이의 Div

내 문제는 일부 중첩 테이블이 있고 div 안에 열을 배치 한 것입니다. div는 AJAX로 작성된 쿼리의 결과에 따라 자바 스크립트로 동적으로 생성 된 체크 박스와 레이블로 채워집니다. 문제는 DIV가 내용에 맞게 더 커지고 내 레이아웃 전체가 엉망이된다는 것입니다.

<table border = "0" width="470px"> 
    <tr> 
    <td height="10px"> 
     <table> 
    <tr> 
      <td width="200px">          
     <font class="section_font"> 
      <label id="feedbackLabel">Metadata name:</label> 
     </font> 
     </td> 
     <td align="right" width="170px"> 
     <font class="section_font"> 
      <input id="selAllCheckbox" type="checkbox" onclick="doSelectAll()"> 
       <label id="selAllCheckboxLabel">Select all</label> 
     </font> 
      </td> 
    </tr> 
     </table> 
    </td> 
    </tr> 
    <tr> 
    <td height="100px"> 
     <div id="metadata_names" style="overflow:auto; border: 0px solid gray"> 
     </div> 
    </td> 
    </tr> 
</table>

ps. div : div에 새 객체를 추가 한 후 에 대한 해결책을 찾았습니다. 다시 DIV 크기를 조정합니다. myDiv.style.height = "100px"; 어쨌든 고맙습니다. 나는 또한 귀하의 솔루션을 시도 할 것입니다.

PS1. 두 가지 솔루션 모두 작동합니다. 그러나 Umesh가 제안한 것은 페이지의 다른 것들과 명확한 격리를 제공하기 때문에 사용할 것입니다.

출처

2013-01-14 GeorgeVremescu

무엇을 하시겠습니까? 다른 요소에 영향을주지 않으면 서 div를 더 크게 만드시겠습니까? 'float : left' 또는'overflow : scroll'을 사용하십시오. – ATOzTOA

아니요. 얼마나 많은 물체를 넣어도 고정 된 높이를 갖기 위해 DIV가 필요했습니다. – GeorgeVremescu

은 DIV의 스타일 속성에 따라 높이를 확인 - 그것은 부모가 TD 즉 년대는 최대 높이를 따를 수 있도록 100 % 귀하의 경우. 내용을 가로 및/또는 세로로 스크롤하려는 경우 "오버 플로우 : 스크롤"을 포함 할 수도 있습니다.

출처

2013-01-14 08:39:56 Umesh

div 컨테이너를 사용하여 클래스를 할당하십시오. 이 div 안에 날짜를 입력해야합니다. 그런 다음 CSS를 사용하여 고정 된 높이를 지정하십시오.

HTML :

<div class="container"> 
    <!-- Your data --> 
</div>

CSS :

.container{ 
    height: 123px; 
    overflow: scroll;  
}

출처

2013-01-14 07:10:13

고정 된 높이의 Div

답변

관련 문제