内容更改高度的输入

我正在做一个布局，我很乐意随后再玩。内容更改高度的输入

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