html - 如何删除水平滚动条

Question

我正在努力做到这一点，以便可以在任何分辨率下查看我的网站，并且我想使用 100% 属性来实现这一点，如果这在 CSS 中是这样称呼的话。我正在使用的网站是 http://twitterdistrict.comuf.com/index.php这样你就可以看到我所处的困境。

我的 HTML 代码:

<div id="pagewrapper">

<div id="header">
<img src="http://i48.tinypic.com/34gu1pl.png" alt="header" height="153" width="655" id="header_img" /> 

</div><!--end header-->

<div id="addverttop">

<img src="http://i50.tinypic.com/uq9et.png" alt="header" height="110" width="670" id="advert_top" /> 

<a href="https://twitter.com/danielanavarr0" target="_blank"><img src="http://i49.tinypic.com/259gzv5.jpg" border="0" alt="Image and video hosting by TinyPic" height="70px" width="70px" id="daniela"></a>


</div><!----end advertisement top--->

<div id="content">

<img src="http://i49.tinypic.com/bj8tfn.png" alt="header" height="1000" width="766" id="contents" /> 


</div>

<div id="forms">

<form action = "index.php" method = "Post">

<div id="name_input"> <label>Name:  </label><br /><input type="text" name="name" maxlength="35"  value="<?php echo "$name" ?>" /><br /><br /></div>
<div id="comment_input"><label>Comment:  </label><br /><textarea name="comment" maxlength="35" cols="25" rows="3"></textarea><br /><br /><br /></div>

<?php
require_once("solvemedialib.php");          //include the Solve Media library 
echo solvemedia_get_html("E5xjj6lyTJh605jWenbaprE1.in1rkN8");   //outputs the widget
?>

<input type="submit" name="submit" value="promote yourself" /><br />





</form>

CSS 是:

 body { margin:0; padding:0}

  #pagewrapper{
  width:100%;
  height:1700px;
  background-color:#77cde6;
  margin-left: auto;
margin-right: auto;


  }

  #header_img{
  margin-left: auto;
margin-right: auto;
  position:relative;
  left:340px
  }

  #addverttop{

  margin-left: auto;
margin-right: auto;
position: relative;
left:240px;
  }

  #contents{

 position:relative;
 left:230px;
 top:30px;

  }

  #forms{
  position:relative;
  left:-300px;
  position:absolute;
left:320px;
top:900px;
z-index:1;
  }

  #username_word{
  position:relative;
  top: -870px;
  left: 5px;

  }

  #name{
    position:relative;
  top: -870px;
  left: 20px;

  }

  #comment{
      position:relative;
  top: -890px;
  left: 340px;

  }

  .dash{
  position:relative;
  top: -870px;
  left: 20px;

  }

  #line{
  position:relative;
  top:-970px;
  }
#followbtn{
position:Relative;
top:-915px;
left: -20px;
}

#name_input{
position:relative;
top:90px;
}

#comment_input{
position:relative;
left:190px;
top:20px;
}

#daniela{
position:relative;
left:-650px;
top:-7px;

}

Answer 1

简单的 CSS 属性 'overflow-x' 就可以做到这一点

overflow-x: visible;

将其添加到您的页面正文和#pagewrapper