개체 내의 높이를 채우는 방법

두 개의 고정 너비 열이 왼쪽에 있고 주 열이 나머지 너비의 너비 인 <body>을 채우고 싶습니다. 각 열 내에서 상단에 <div> 개체를 배치하고 나머지 높이를 채우는 개체로 <ul>을 배치하고 싶습니다. 나는 다음을 시도했지만, 높이를 채우기 위해 <ul> 개체의 높이를 자동으로 조정할 수는 없었다. 오히려 그것들은 그것들 위에있는 <div> 높이만큼 바닥에 넘쳐 흐릅니다.개체 내의 높이를 채우는 방법

는

<html> 
<style> 
body{ 
    margin:0;padding:0; 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-color:red; 
} 
.column{ 
    float: left; 
    background-color:blue; 
} 
.column>ul{ 
    height: 100%; 
    width: 100; 
    overflow-y: scroll; 
    overflow-x: hidden; 
    background-color:green; 
} 
#main-column>ul{ 
    height: 100%; 
    overflow-y: scroll; 
    overflow-x: hidden; 
    background-color:brown; 
} 
</style> 
<body> 
<div class="column"> 
    <div>Column 1 Title</div> 
    <ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    </ul> 
</div> 
<div class="column"> 
    <div>Column 2 Title</div> 
    <ul> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    </ul> 
</div> 
<div id="main-column"> 
    <div>Main Column Title</div> 
    <ul> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    </ul> 
</div> 
</body></html>

는

어떻게 그것이 <ul> 객체의 높이가 자동으로 나머지 높이를 채우기 위해 조정되도록 할 수 ? 이것은 내가 지금까지 얻은 것입니다. 스크롤 막대가 잘려서 창 테두리 아래로 확장되어 높이가 범람하고 있음을 나타냅니다. 당신이 열 제목을 고정 높이를주는 경우에

screen shot

출처

2012-10-17 sawa

, 당신은 ul들에 position: absolute와 함께 당신이 원하는 레이아웃을 얻을 수 있음을 사용할 수 있습니다. 데모 : http://jsbin.com/ecilob/1/edit

HTML :

<body> 
    <div class="column fw"> 
     <div class="title">Column 1 Title</div> 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
     </ul> 
    </div> 
    <div class="column fw"> 
     <div class="title">Column 2 Title</div> 
     <ul> 
      <li>Item 3</li> 
      <li>Item 4</li> 
     </ul> 
    </div> 
    <div class="column main"> 
     <div class="title">Main Column Title</div> 
     <ul> 
      <li>Item 5</li> 
      <li>Item 6</li> 
     </ul> 
    </div> 
</body>

CSS :

body { 
margin: 0; 
    padding: 0; 
} 

.column .title { 
    height: 30px; 
    border-bottom: 1px dashed #333; 
} 

.column { 
    background: lightblue; 
    float: left; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
} 
.column + .column { 
    background: coral; 
    left: 120px; 
} 
.column + .column + .column { background: goldenrod; } 

.column.fw { 
    width: 120px; 
} 
.column.main { 
    left: 240px; 
    right: 0; 
} 

.column ul { 
position: absolute; 
    margin: 0; 
    top: 30px; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    overflow-y: scroll; 
}

출처

2012-10-17 17:31:44 tuff

개체 내의 높이를 채우는 방법

답변

관련 문제