2012-09-06 79 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: "" ""; 
}​ 

哦,拜托!不要使用内联样式!