我的页面没有滚动条

Question

i don't know whats wrong but my page doesnt have a scrollbar, when the page exceeds, i cant scroll below it. what seems to be the probblem with my code?

i am new to ASP.NET so yeah, i do not know much yet. thanks in advance!

here is my full aspx page.

<form id="form1" runat="server">
    <div style="width:100%;height:100%;overflow:scroll;overflow-y:auto;">
<div class="body">
<div class="pull-right">
            <br />
            <div class ="dropdown" runat="server">
                <asp:Label ID="hideID" runat="server" Text="#" Visible="false"></asp:Label>
                <asp:Label ID="lblLogged" runat="server" CssClass="dropbtn" Text="Name" />
                <div class="dropdown-content">
                    <asp:LinkButton ID="btnMain" runat="server" OnClick="btnMain_Click">Main Menu</asp:LinkButton>
                    <asp:LinkButton ID="btnLogO" runat="server" OnClick="btnLogO_Click">Log Out</asp:LinkButton>
                    <%--<a id="btnLogOut" runat="server" href="LogIn.aspx">Log Out</a>--%>
                </div>
            </div>

<%-- Current User: --%>

and here is my CSS, i dont know if its correct

<style type="text/css">
     .*{
         width:auto;
         height:auto;
         overflow-y: hidden;
         overflow:auto;
     }

    .body{
        position:absolute;
        left:24%;
        width:800px;
        height:400px;
        z-index:0;  

    }
    .home{
        position:absolute;
        top: 200px;
        left: 38%;
        z-index: 2;
    }
    .yusenlogo{
        position:center;
        left:40%;
    }
    .exist{
        position:absolute;
        height:10%;
        width:40%;
        top: 250px;
        left: 30%;
        z-index: 2;
        background-color: darkred;
        border-top:5px;
    }
    .added{
        position:absolute;
        height:8%;
        width:40%;
        top: 250px;
        left: 30%;
        z-index: 2;
        background-color: forestgreen;
        border-top:5px;
    }
    .well2 {
        position:absolute;
        width:40%;
        top: 310px;
        left: 30%;
        z-index: 2;
        min-height: 20px;
        padding: 19px;
        margin-bottom: 20px;
        /*background-color: #f5f5f5;*/
        /*border: 1px solid #e3e3e3;*/
        border-radius: 4px;
        /*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);*/
        }
    .well3 {
        position:absolute;
        width:70%;
        top: 80px;
        left: 13%;
        z-index: 2;           
    }
    .buttons{
        cursor:default;
    }
    .banner{
        position:absolute;
        top: 50%;
        left: 50%;
        z-index:2;
    }
    .character{
        position:absolute;
        height:60px;
        width:40%;
        top: 250px;
        left: 30%;
        z-index: 2;
        background-color: darkred;
        border-top:5px;
    }

    .lowerleft {
        position: fixed;
        bottom:8px;
        left:16px;
        width:100%;
    }

    .lowerleftuser {
        position: fixed;
        bottom:8px;
        left:16px;
        width:100%;
        z-index:1000;
    }
    .forGridView {
        position:fixed;
        top:30%;
        left:30%;
        z-index:1000;
    }
    .container {
         width:auto;
         height:auto;
         overflow-y: hidden;
         overflow:auto;
    }

    .dropbtn {
        background-color: cornflowerblue;
        color: white;
        padding: 12px;
        font-size: 13px;
        border: none;
        cursor: pointer;
    }


    .dropdown {
        position: relative;
        display: inline-block;
    }


    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }


    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }


    .dropdown-content a:hover {background-color: #f1f1f1}


    .dropdown:hover .dropdown-content {
        display: block;
    }


    .dropdown:hover .dropbtn {
        background-color: cornflowerblue;
    }
    #txtFrom
    {
        background-image: url(Images/Calendar2.png);
        background-position: right;
        background-repeat: no-repeat;
        /*padding: 3.5px 10px;*/
        padding: 6px 12px;
        line-height: 1.428571429;
        color: #555555;
        vertical-align: middle;
        background-color: #ffffff;
        border: 1px solid #cccccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
        transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    }
    #txtTo
    {
        background-image: url(Images/Calendar2.png);
        background-position: right;
        background-repeat: no-repeat;
        padding: 6px 12px;
        line-height: 1.428571429;
        color: #555555;
        vertical-align: middle;
        background-color: #ffffff;
        border: 1px solid #cccccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
        transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    }

</style>  

Answer 1

In your CSS:

.*{
     width:auto;
     height:auto;
     overflow-y: hidden;
     overflow:auto;
 }

remove "overflow-y: hidden;"

overflow-y is the vertical scrollbar, this CSS is suppressing it, see http://www.w3schools.com/cssref/css3_pr_overflow-y.asp for more information.