내용 입력 높이 변경

나중에 더 재미있게 놀 수있는 레이아웃을 만들고 있습니다.내용 입력 높이 변경

현재 내 HTML입니다.

<!DOCTYPE html> 
<html> 
<head> 
    <title>title</title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 

<body> 
<div id="top"> 
    <a class="title" href="index.html">TITLE</a> 
</div> 
<div id="middle"> 
    <h2>SubTitle</h2> 
</div> 
<div id="bottom"> 
    <ul> 
     <a class="nav" href="#"><li>NAV1</li></a> 
     <a class="nav" href="#"><li>NAV2</li></a> 
     <a class="nav" href="#"><li>NAV3</li></a> 
     <a class="nav" href="#"><li>NAV4</li></a> 
     <a class="nav" href="#"><li>NAV5</li></a> 
    </ul> 
</div> 
</body> 

</html>

및 CSS.

HTML, body { 
margin: 0px; 
padding: 0px; 
height: 100%; 
width: 100%; 
color: #0d0d0d; 
} 

#top { 
display: block; 
width: 100%; 
height: 15%; 
border-bottom: 2px solid blue; 
background-color: #f2f2f2; 
box-sizing: border-box; 
overflow: hidden; 
margin: 0px; 
padding: 0px; 
} 

.title { 
display: block; 
padding-top: 2%; 
width: 100%; 
text-align: center; 
color: #0d0d0d; 
font-family: arial black; 
text-decoration: none; 
font-size: 4em; 
} 

#middle { 
display: block; 
max-width: 600px; 
height: 75%; 
max-height: 75%; 
margin: 0 auto; 
} 

#bottom { 
display: block; 
width: 100%; 
height: 10%; 
background-color: #f2f2f2; 
margin: 0px; 
padding: 0px; 
} 

ul 
{ 
list-style-type:none; 
margin:0; 
padding:0; 
width: 100%; 
height: 100%; 
} 

li 
{ 
float: left; 
width: 20%; 
height: 100%; 
text-align: center; 
box-sizing: border-box; 
border-top: 2px solid blue; 
border-right: 2px solid blue; 
padding-top: 3%; 
overflow: hidden; 
-webkit-transition: color 500ms; 
-moz-transition: color 500ms; 
-o-transition: color 500ms; 
transition: color 500ms; 
} 

.nav 
{ 
display: inline; 
text-decoration: none; 
color: #0d0d0d; 
font-family: arial black; 
} 

li:hover 
{ 
color: orange; 
}

문제는 내가 같은 헤더 또는 단락 같은 내용으로 "중간"사업부를 채울 때, 높이 변화가 있어야한다 무엇을지나 확장 할 수 있다는 사실에있다. 레이아웃에는 스크롤 막대가 없으므로 div의 백분율이 최대 100 %가됩니다.

콘텐츠를 추가 할 때 중간 div가 증가하는 이유는 무엇입니까? 이 문제를 어떻게 해결할 수 있습니까?

감사합니다. 당신은 단순히 여분의 내용을 잘라 가지고 찾고 있다면

출처

2012-11-20 user1472065

콘텐츠가 할당 된 공간 이상으로 커지면 어떻게해야할까요? 그냥 끊어야할까요? – gotohales