0

ブラウザーのサイズを小さくすると、div とブラウザー ウィンドウのマージンの間の右側にスペースができます。そのスペースを削除するにはどうすればよいですか?

私のスクリーンショットはこちら https://fbcdn-sphotos-ga.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>
4

4 に答える 4

2

あなたのcssファイルで試してください:

* { 
    margin:0;
    padding:0;
  }
于 2012-09-06T19:06:34.600 に答える
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: "" "";
}​

あ、お願いします!インライン スタイルを使用しないでください。

于 2012-09-06T21:15:27.437 に答える
0

body タグの topmargin、bottommargin、左右の余白を削除し、単純に margin:0; と入力します。あなたのボディスタイルがヘッダーにあります。

于 2012-09-06T19:03:10.460 に答える
0

ページで reset.css を使用します。すべてのブラウザですべての css プロパティをリセットします。

于 2012-09-06T19:07:54.293 に答える