Question

垂直滚动条出现在页面中。我没有因为它造成什么。我已经尝试添加display：block to和display：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%;
}

Answer 1

您是否尝试过使用overflow-y: hidden或auto？如果出现溢出，Auto只会添加滚动条。尝试将此添加到您的身体CSS。

Answer 2

尝试打开开发人员工具并检查哪个div超出了入口宽度。

尽管如此，您始终可以在overflow-y: hidden或body元素上设置html。

垂直滚动条不由自主地出现

2 个答案: