2012-09-06 118 views
0

當瀏覽器尺寸變小時,我在div和瀏覽器窗口邊緣之間的右側獲得空間。如何刪除該空間?如何刪除div和頁面之間的空間

我的截屏在這裏 https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/538697_4098812043002_480328736_n.jpg

我的編碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link href="c.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
body { 
    background-color: #0CF; 
    background-image:url(tile.png); 
    background-attachment:fixed; 
    background-repeat: repeat; 


} 
</style> 
</head> 

<body topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0"> 
<div id="dd" style="background-color:#0094d6; width:100%; height:75px;" class="center div_border"><div id="a" style="width:967px; height:75px; background-color:#000000;background:url(xx.png); font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#003; " class="inner"> 

    <table width="100%" border="0" > 
    <tr > 
     <td width="1%" height="14">&nbsp;</td> 
     <td width="1%">&nbsp;</td> 
     <td width="1%">&nbsp;</td> 
     <td width="1%">&nbsp;</td> 
     <td width="1%">&nbsp;</td> 
     <td width="1%">&nbsp;</td> 
     <td width="1%">&nbsp;</td> 
     <td width="1%">&nbsp;</td> 
     <td width="1%">&nbsp;</td> 
     <td width="1%">&nbsp;</td> 
     <td width="33%">&nbsp;</td> 
     <td width="12%">&nbsp;</td> 
     <td width="32%">&nbsp;</td> 
     <td width="5%">&nbsp;</td> 
     <td width="1%">&nbsp;</td> 
     <td width="7%">&nbsp;</td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td colspan="3"><div style="background-color:#006d9e;border-radius:3px; width:250px; height:34px; display: table; 
vertical-align: middle; color:#FFF; "> 
     <table width="100%" border="0" > 
      <tr > 
      <td width="43%" style="text-align:center"> Start to bump !</td> 
      <td width="29%"><input name="login_btn" type="submit" class="login_button" id="login_btn" value="Log in" /></td> 
      <td width="28%"><input name="register_btn" type="submit" class="register_button" id="register_btn" value="Register" /></td> 
      </tr> 
     </table> 
     </div></td> 
     </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td style="color:#FFF; font:Arial, Helvetica, sans-serif; font-size:9px; text-align:right;">Beta Version</td> 
     </tr> 
    </table> 

</div></div> 
<div class="center box2" style="width:967px;background-color:#f1f5f6;"> 
<div style="width:967px; height:75px;"> 


</div> 
<div id="aa" class="center" style="width:967px"> 
<p> ***********START**********************************lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumrem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p> 


    </div> 
    </div> 
<div id="dd" style="background-color:#0094d6; width:1366; height:45px; " ><div id="a" style="width:967px; height:45px; background-image:url(footer.png); position:relative;"class="inner" > 
<table width="100%" border="0"> 
     <tr> 


      <td>&nbsp;</td> 
      <td style="font-family:Arial, Helvetica, sans-serif;font-size:10px; color:#FFF; text-align:center">  Copyright © LCB 2013, All rights reserved. </td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr > 
      <td width="30%">&nbsp;</td> 
      <td width="43%">&nbsp;</td> 
      <td width="27%">&nbsp;</td> 
     </tr> 
     </table> 
</div> 

</div> 
</body> 
</html> 
+0

沒有空間給我:http://codepen.io/hmartiro/pen/ntGAB。但是,您應該右鍵單擊該空間,然後在Chrome中選擇「檢查元素」,這應該會引導您瞭解您的情況。 –

+0

只有當瀏覽器窗口大小變小時纔會獲得。使瀏覽器窗口尺寸變小並查看。 –

+0

我認爲問題出在您的背景圖片上,請嘗試刪除該圖片並嘗試一次.... – mani

回答

0

刪除您TOPMARGIN,bottommargin,左,對你的身體標記右頁邊距,只是把保證金:0;在你的身體風格在頭上的地方。

2

在你的CSS文件的嘗試:在您的page.it

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

我已經添加了。但不好轉 –

0

使用reset.css重置所有CSS屬性中的所有browswer。

+0

我該如何使用它? –

+0

訪問此網站http://meyerweb.com/eric/tools/css/reset/並將css數據複製到分隔符文件中並將文件添加到您的頁面 –

0

總是使用CSS重置。有很多,但我喜歡用這個創建的Eric Meyer

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-weight: inherit; 
    font-style: inherit; 
    font-size: 100%; 
    font-family: inherit; 
    vertical-align: baseline; 
} 
/* remember to define focus styles! */ 
:focus { 
    outline: 0; 
} 
body { 
    line-height: 1; 
    color: black; 
    background: white; 
} 
ol, ul { 
    list-style: none; 
} 
/* tables still need 'cellspacing="0"' in the markup */ 
table { 
    border-collapse: separate; 
    border-spacing: 0; 
} 
caption, th, td { 
    text-align: left; 
    font-weight: normal; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ""; 
} 
blockquote, q { 
    quotes: "" ""; 
}​ 

哦,拜託!不要使用內聯樣式!