2013-08-16 38 views
3

我正在用兩個iframe創建一個html頁面。左框將用於導航目的,右框將顯示實際內容。但是頁腳下方仍有很多空間。我如何刪除它?頁腳後有很多空白

下面是HTML代碼:

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<title>Orion ERP Help</title> 
<meta charset="UTF-8"> 
<link rel="stylesheet" href="style.css"> 
</head> 
<body> 

<div id="header"> 
<img id="logo" src="images/logo.png" alt="Orion Logo"> 
</div> 
<div id="navi"> 
<iframe id="menu" src="menu.html"></iframe> 
</div> 
<div id="frame"> 
<iframe id="content" name="content" src="about.html"></iframe> 
</div> 
<div id="footer"> 
    © 2013 Intelligent ERP. All right reserved. 
</div> 
</body> 
</html> 

這裏是CSS

body { 
margin: 0; 
padding: 0 0 0 17%; 
} 

#header { 
background-color: #f8651c; 
padding: 0; 
margin: 0; 
height: 130px; 
} 

#logo { 
margin: 10px 0 0 10px; 
padding: 0; 
} 


#menu { 
position: absolute; 
background-color: #f6f6f6; 
top: 0; 
left: 0; 
height: 100%; 
width: 17%; 
border: 0; 
border-right: 2px solid #a2a2a2; 
} 


#frame { 
position: relative; 
height: 100%; 
} 

#content { 
position: relative; 
top: 0; 
left: 0; 
border: 0; 
height: 100%; 
width: 100%; 
overflow: hidden; 
} 

#footer { 
position: absolute; 
text-align: center; 
font-size: 70%; 
font-family: helvetica, sans-serif; 
width: 83%; 
bottom: 0; 
} 

回答

2

你應該去除對人體類填充

body { 
margin: 0; 
padding: 0 0 0 0; 
} 
+0

它的存在保存圖像在它的位置,沒有17%填充圖像將被移位 – lichborne

+2

@lichborne此答案有效。您可以添加填充和邊距到您的圖像來修復它們,而不是將填充應用到其他元素。 –

+1

你的身體底部增加了17%的餘量,這就是爲什麼你有很多空白。你應該在圖像上應用邊緣或使用其他技術,否則我相信你不會擺脫空間 – legrandviking