'Footer to stick to bottom of the page when Treeview control expands

Hello All! I have trouble making the footer stay at the bottom of the page. I have treeview control, when expanded overlaps the footer. Please help to make the footer stay at the bottom of the page.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   
    <style type="text/css">
        html{
             height: 100%;
            box-sizing: border-box;
        }
            *,
            *:before,
            *:after {
              box-sizing: inherit;
            }

        body {
          position: relative;
          margin: 0;
          padding-bottom: 6rem;
          min-height: 100%;

        }

          
       
       #container {
        margin-bottom: 50px;
        min-height:100%;
        position:relative;
        text-align: left;
        font-size: medium;
       font-family:Verdana;
        
        }

       /*#main{
           overflow:auto;
           padding-bottom:50px;
           /*height:2000px;
           text-align: left;
        font-size: medium;
       font-family:Verdana;
       }*/

        
         #Footer{
             
            position:absolute;
            /*z-index: 10;
             width:100%;*/
             /*margin:auto;*/
             bottom:0;
             height:50px;
             font-family:Verdana;
             font-size:70%;
            color:black;
            /*margin-top:-50px;*/
             clear: both;


            
        }
    </style>
</head>
<body>

   
    <form id="form1" runat="server">
 
       
        <div id="container">

           <%--<div id="main">--%>
                 <asp:TreeView runat="server" ID="TrVwEmpHier" BackColor="White" ForeColor="Black" ExpandDepth="1" Height="169px" Width="119px" NodeIndent="50">
                            <HoverNodeStyle />


                            <LeafNodeStyle Font-Bold="False" Font-Italic="True" NodeSpacing="2px" VerticalPadding="2px" />
                            <NodeStyle Font-Bold="True" NodeSpacing="2px" VerticalPadding="2px" />
                            <ParentNodeStyle Font-Names="Verdana" Font-Size="Larger" NodeSpacing="2px" VerticalPadding="2px" />


                            <RootNodeStyle Font-Italic="True" Font-Names="Verdana" Font-Size="XX-Large" NodeSpacing="2px" VerticalPadding="2px" />


                        </asp:TreeView>
                    

            <%--</div>--%>
                       


        </div>
        <div id="Footer">
            
       <%[email protected]%> 
        </div>
      
    </form>

           
    
</body>
     
</html>

Please help ! Hello All! I have trouble making the footer stay at the bottom of the page. I have treeview control, when expanded overlaps the footer. Please help to make the footer stay at the bottom of the page.

cssasp.netbootstrap-4footer


Solution 1:[1]

If you are curious where i got my answer from, follow this link.Amazing explanation. Responsive footer displayed over parts of content when shrinking browser

Just by adding display: flex; in footer style, i was able to make the footer stick to the bottom of the screen.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 SaraDob

Related Questions