垂直滾動條出現不由自主

垂直滾動條出現在頁面中。我沒有iea是什麼導致它。我試過將display：block添加到並顯示：block-inline給它的子項，但它不起作用。以前我不得不將這些寬度設置爲一些奇怪的％值，但現在它們似乎無法繼續工作。垂直滾動條出現不由自主

<!DOCTYPE html> 
<html> 

    <head> 
    <title>Code Together</title> 
    <!--Reference css--> 
    <link href="/Styles/frontpage.css" rel="stylesheet" type="text/css" /> 

    <!--Reference jquery library--> 
    <script src="/Scripts/jquery-2.2.1.js"></script> 
    <!--Reference the SignalR library. --> 
    <script src="Scripts/jquery.signalR-2.1.2.min.js"></script> 
    <!--Reference the autogenerated SignalR hub script. --> 
    <script src="/signalr/hubs"></script> 
    <!--Reference ace--> 
    <!--<script src="~/Scripts/RoomFunctions.js" type="text/javascript" charset="utf-8"></script>--> 
    </head> 

    <body> 
    <div id="container"> 
     <div id="header"> 
     <h1>Code Together </h1> 
     </div> 
     <div id="main"> 



     <form method="get" action="/room.cshtml"> 
      <div id="creator"> 
      <input type="text" name="chatroom" id="joinRoom" placeholder="Room ID" /> 
      </div> 
      <div id="creatorButtons"> 
      <input type="button" id="join" value="Join Room" /> 
      <input type="submit" id="create" value="Create New Room" /> 
      </div> 
     </form> 

     <script> 
      $('#join').click(function() { 
      if ($('#joinRoom').is(':hidden')) { 
       $('#joinRoom').slideDown(450); 
       $('#joinRoom').focus(); 
      } else { 
       $(this).attr({ 
       type: 'submit' 
       }) 
      } 
      }); 
      $('#create').click(function() { 
      var randomValue = Math.floor((Math.random() * 1000) + 1); 
      var randomValue2 = (Math.random().toString(36) + '00000000000000000').slice(2, 6 + 2); 
      $('#joinRoom').attr({ 
       value: randomValue2.toString() 
      }) 
      }); 

     </script> 

     </div> 
     <div id="footer"> 
     &copy; 2016 Code Together 
     </div> 
    </div> 

    </body> 

</html>

CSS文件：

@font-face { 
    font-family: KongText; 
    src: url('kongtext.ttf'); 
} 

html, 
body { 
    background-color: Highlight; 
    font-family: KongText; 
    height: 96%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

#container { 
    height: 100%; 
} 

#header { 
    height: auto; 
    font-size: 2em; 
    text-align: center; 
} 

#main { 
    height: 83.3%; 
    width: 100%; 
    margin: 0 auto; 
} 

#footer { 
    font-size: 13px; 
    position: fixed; 
    bottom: 0; 
    right: 0; 
} 


/*default.cshtml*/ 

#creator { 
    width: 350px; 
    margin: auto; 
    margin-top: 10%; 
    display: flex; 
} 

#joinRoom { 
    background-color: coral; 
    height: 50px; 
    width: 346px; 
    font-size: 30px; 
    display: none; 
} 

#creatorButtons { 
    width: 350px; 
    margin: auto; 
} 

#join { 
    background-color: coral; 
    width: 350px; 
    height: 50px; 
    font-family: KongText; 
    font-size: 1.4em; 
} 

#create { 
    background-color: coral; 
    width: 350px; 
    height: 50px; 
    font-family: KongText; 
    font-size: 1.3em; 
    margin-top: 1px; 
} 


/*all about editors*/ 

.site { 
    display: inline-block; 
} 

#editors { 
    height: 100%; 
    width: 100%; 
} 

#selectors { 
    height: 3%; 
    width: 100%; 
} 

.allSelectors { 
    display: inline-block; 
} 

#selector1 { 
    width: 40%; 
    position: relative; 
} 

#selector2 { 
    width: 60%; 
} 

.modeFirst { 
    float: left; 
    margin-top: 0.3%; 
} 

.modeSecond { 
    float: right; 
    margin-top: 0.3%; 
} 

#first, 
#third { 
    height: 100%; 
    width: 40%; 
} 

#second { 
    height: 100%; 
    width: 20%; 
} 


/*room.cshtml*/ 

.site { 
    vertical-align: bottom; 
} 

.chatBox {} 

#chatBox { 
    display: block; 
    resize: none; 
    height: 92%; 
    width: 100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

#message { 
    display: block; 
    height: 4%; 
    width: 100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

#msgSend { 
    height: 4%; 
    width: 100%; 
}

來源

2016-03-07 JanRad