나는이에 약간의 시간을 보냈지 만이 CSS의 문제를 해결할 수없는

Question

demo

페이지 스크롤 중첩 된 DIV 크기를 조정 만들기. 4 개의 중첩 된 div가 있습니다. 가장 안쪽의 자식 div는 행 테이블을 보유합니다.

HTML 구조

div class="moduleContentContainer"> 
<div id="dash-board-container"> 
<div class="dash-board-item"> 
    <div class=".quote_list_container"> 
     <table> 
      <tr><td>ssss</td></tr> 
       <tr><td>ssss</td></tr> 
      <tr><td>ssss</td></tr> 
      <tr><td>ssss</td></tr> 
      <tr><td>ssss</td></tr> 
      <tr><td>ssss</td></tr> 
      <tr><td>ssss</td></tr> 
      <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr>] 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 

     <table> 
    </div> 
</div> 

(1) 나는 dash_Board_Item 사업부는 자사의 콘텐츠를합니다 (.quote_list_container의 DIV "의 내용)의 크기에 따라 높이를 갖고 싶어. 그렇다면 테이블에 대시 보드 항목 div는 높이에 비해 작고 내용에 따라 달리해야합니다.

(2) 창 크기를 조정하면 .quote_list_container div에 스크롤 막대가 표시됩니다. 필수.

광선

Answer 1

예제를 참조하십시오.

.quote_list_container { 
 
color: #6e6e6e; 
 
font-family: arial; 
 
font-size: 14px; 
 
overflow-y: auto; 
 
overflow-x: hidden; 
 
/* position: relative; */ 
 
max-height: 91%; 
 
} 
 

 
.dash-board-item { 
 
margin-right: 20px; 
 
display: inline-block; 
 
border-style: solid; 
 
max-width: 700px; 
 
min-width: 300px; 
 
border-color: #999999; 
 
border-width: 1px; 
 
/* box-shadow: 0px 0px 1px rgb(109,109,110); */ 
 
/* float: left; */ 
 
padding-left: 10px; 
 
padding-right: 10px; 
 
margin-bottom: 20px; 
 
position: relative; 
 
    height: 100%; 
 
     overflow: auto; 
 
    
 
} 
 

 
#dash-board-container { 
 
position: absolute; 
 
height: 90%; 
 
} 
 

 
.moduleContentContainer { 
 
width: 100%; 
 
}

<div class="moduleContentContainer"> 
 
<div id="dash-board-container"> 
 
    <div class="dash-board-item"> 
 
     <div class=".quote_list_container"> 
 
      <table> 
 
       <tr><td>ssss</td></tr> 
 
        <tr><td>ssss</td></tr> 
 
       <tr><td>ssss</td></tr> 
 
       <tr><td>ssss</td></tr> 
 
       <tr><td>ssss</td></tr> 
 
       <tr><td>ssss</td></tr> 
 
       <tr><td>ssss</td></tr> 
 
       <tr><td>ssggggss</td></tr> 
 
        
 
      <table> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>

Answer 2

첫째, 당신은 당신의 HTML 내 실수 있습니다 div class=".quote_list_container" 당신은 클래스 이름에서 마침표 .을 제거해야합니다.

둘째, 콘텐츠가 포함 된 요소가 두 요소 내에 중첩되어 있기 때문에 max-height의 백분율 값을 사용하면 문제가 발생할 수 있습니다. 왜냐하면 부모를위한 명시적인 높이를 지정해야하기 때문입니다.

따라서 그 달성 vh viewport percentage unit을 사용할 수

Example Here

.quote_list_container { 
    overflow-y: auto; 
    overflow-x: hidden; 
    max-height: 100vh; 
} 

사양을 W3C에서 :

VH 부
균등의 1 % t의 높이 그는 초기 블록을 포함하고있다.

vh 뷰포트 상대 길이가 supported in IE9 이상임을 유의할 가치가 있습니다.