如何刪除水平滾動條

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; 
} 

溢出-X和-Y風格不在某些IE瀏覽器所識別。你可以使用一些javascript：

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