html - Vertical scrollbar appearing involuntarily -
vertical scrollbar appearing in page. have no iea causing it. i've tried adding display: block , display: block-inline children did not work. had set these width weird % values seem stop working anyway.
<!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 signalr library. --> <script src="scripts/jquery.signalr-2.1.2.min.js"></script> <!--reference 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 </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"> © 2016 code </div> </div> </body> </html> css file:
@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 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%; }
have tried using overflow-y: hidden or auto? auto add scroll bar if there overflow. try adding body css.
Comments
Post a Comment