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

Answer 2

将此添加到您的CSS：

div {
overflow-x:hidden;
overflow-y:hidden;
}

在某些IE浏览器中无法识别overflow-x和-y样式。你可以使用一些javascript：

document.documentElement.style.overflow = 'hidden';  
document.body.scroll = "no";    // ie only

如何删除水平滚动条

2 个答案: