內容更改高度的輸入

我正在做一個佈局，我很樂意隨後再玩。內容更改高度的輸入

目前，這是我的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