The sidebar does not expand to the bottom

Question

Where is problem and how can resolve it?

I dont want to delete or change any css codes like float and display.

inliner_content used for set side bar to be in line of content.

I use wrap class to have a sticky footer.

I use some customed class and simaulate table structure for DIVs in forms.

Also, this code is a sample code and a series of it has been repeated.

.wrap
{
direction: rtl;
  height:100%;
  width: 100%;
}
#menu_icon_mng
{    display: none;
    width: 25px;
    height: 25px;
    background: url(pics/menu_icon.gif) center;
    background-size: 25px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 0;
}

.main_m_mng
{
    /* height: 14%; */
    border-bottom: 1px solid;
    height: 25px;
    line-height: 25px;
    /*      display: inline-block; */
    /*     float: right; */
    padding-right: 10px;
    /*     text-align: center; */
    transition: all 0.5s ease 0s;
    cursor:pointer;
}
.main_m_mng_name
{
    /* height: 14%; */
    border-bottom: 1px solid;
    height: 25px;
    line-height: 25px;
    /*      display: inline-block; */
    /*     float: right; */
    padding-right: 10px;
    /*     text-align: center; */
    /*transition: all 0.5s ease 0s;*/
    /*cursor:pointer;*/
}
.main_m_mng i
{
    margin-left: 15px;
    float: left;
    line-height: 25px;
    /*     display: inline-block; */
    /*     color:white; */
}
.main_m_mng:hover
{
    background-color: #e0dddd;
    padding: 0 20px 0;
    margin: 0 1px 0;
    /*     -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; */
}

/* .main_m_mng:after {
    border-bottom: 1px solid #000;
    content: '';
} */

.sub_menu_mng {
    white-space: nowrap;
    display: none;
}

.inliner_content {
    width: 100%;
    min-height: 77%;
    overflow: hidden;
    /* display: table; */
    /* padding-bottom: 8px; */
    /* margin-bottom: -19px; */
}

.main_m_link_mng {
    transition: all 0.5s ease 0s;
    width: 100%;
}
.tbl_frm {
    display: block;
}

.tbl_tr {
    display: block;
    margin-bottom: 10px;
}

.tbl_td {
    display: inline-block;
    min-width: 150px;
}

.tbl_thead {
    display: block;
}

.tbl_th {
    display: inline-block;
    min-width: 200px;
    margin: auto;
}
.footer {
    /* position: relative; */
    height: 150px;
    /* margin-top: -150px; */
    background-color: #4a4a4a;
   
    background-size: 116px;
}

<div class="wrap">
    <div class="inliner_content">

    
<div class="shadow_main_mnu_mng" style="
    display: none;
    /* direction: rtl; */
    font-family: monospace;
    font-size: 12px;
    /* min-height: inherit; */
    /* height: 100%; */
    width: 20%;
    min-width: 150px;
    max-width: 150px;
    background-color: #8a4747;
    float: right;
    /* display: flex; */
    margin-top: 82.7%;
    /* margin-right: -150; */
    /* z-index: 100; */
    padding-bottom: 100%;
    /* margin-bottom: 1px; */
"></div>

<div style="min-height: 100%;height: inherit;/* padding-bottom: inherit; */width: 20%;position: absolute;/* clear: both; */min-width: 150px;max-width: 150px;background-color: #bbb2b2;float: right;/* display: flex; *//* bottom: -62px; *//* flex-direction: column; *//* margin-top: 0; *//* margin-top: -256px; *//* margin-bottom: 40px; */z-index: 100;" class="main_menu_mng">

        <div class="main_m_mng_name">Jack Hue     </div>

        <a href="#" id="menu_icon_mng" onclick="f_menu()" onblur="f_menu()"></a>
        <div class="main_menu_list_mng" id="main_menu_list_mng" style="display: block;">

            <a class="main_m_link_mng" href=".mpnt=nzmnd">
                <div class="main_m_mng">
                    <i class="fa fa-volume-control-phone"></i>Account Setting
                </div>
            </a>
            <a class="main_m_link_mng" href="new/mpnt=nzmnd">
                <div class="main_m_mng">
                    <i class="fa fa-volume-control-phone"></i>Posts
                </div>
            </a>

            <a class="main_m_link_mng" href="?pmodir=2646&amp;mpnt=nzmnd"><div class="main_m_mng">
                    <i class="fa fa-volume-control-phone"></i>Users</div></a>


            <a class="main_m_link_mng">
                <div class="main_m_mng"><i class="fa fa-product-hunt"></i>Admin Users
                </div>
            </a>
            <!-- <div style="position: absolute;z-index: 105;"> -->
            <div id="sub_menu_mng" class="w3-animate-top-menu sub_menu_mng">
                <div><a href="#">sub menu long</a></div>
                <div><a href="?mpnt=test">User Register</a></div>
                <div><a href="#">Sub menu3</a></div>
            </div>
            <!-- </div> -->

            <a class="main_m_link_mng">
                <div class="main_m_mng"><i class="fa fa-product-hunt"></i>New Admin
                </div>
            </a>
            <!-- <div style="position: absolute;z-index: 105;"> -->
            <div id="sub_menu_mng" class="w3-animate-top-menu sub_menu_mng">
     <div><a href="#">sub menu long</a></div>
     <div><a href="?mpnt=test">User Register</a></div>
     <div><a href="#">Sub menu3</a></div>
            </div>
            <!-- </div> -->


            <div class="main_m_mng"><a class="main_m_link_mng"><i class="fa fa-product-hunt"></i> Admin Users old link</a>
                <div style="position: absolute;z-index: 105;">
                    <div id="sub_menu_mng" class="w3-animate-top-menu sub_menu_mng">
       <div><a href="#">sub menu long</a></div>
       <div><a href="?mpnt=test">User Register</a></div>
       <div><a href="#">Sub menu3</a></div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div style="
    /* float: left; */
    /* display: inline-block; */
    /* width: 73%; */
    padding: 0 10px;
    padding-right: 160px;
    /* margin-right: -150px; */
    background-color: blue;
    /* z-index: -4; */
    top: 0;
    min-height: 100%;
" class="content">
        
<script src="ref/cml_chk.js"></script>
<script src="ref/statlist2.js"></script>
<!--<script src="chk_frm_reg.js" ></script>-->
<input type="hidden" class="prov1" value="6">

<form name="frmreg" method="post" onreset="" onsubmit="return display_err1()" style="
    margin-block-end: 0em;
">

    <input type="hidden" name="pr_reg_form" value="139">


        


            <input type="hidden" name="pr_reg_form" value="139">

            <div style="margin-right:15px">

                <div class="tbl_tr">
                                            <div class="tbl_td">Date (Today):</div>
                                        <div class="tbl_td" align="right"> :::::::   
                    </div>
                </div>
            </div>


        <div id="pers_info">
            <div width="100%" border="0" dir="rtl" cellspacing="10px" style="margin-right:15px" class="tbl">
                <div class="tbl_thead">
                <div class="tbl_th" colspan="3">Pers Info
                    <hr>
                    <br></div>
                </div>
                <!--////////////////////////////////////////================================Form main===========================================================================================================/////////////////-->

            <div class="tbl_tr">
                        <div class="tbl_td" width="">Name :</div>
                        <div class="tbl_td" colspan="2"><input name="fname" id="form_text" type="text" onkeypress="return checkContentname(event)" value=""></div>
                    </div> 
                                    <div class="tbl_tr">
                        <div class="tbl_td">Last Name :</div>
                        <div class="tbl_td" colspan="2"><input name="lname" id="form_text" type="text" onkeypress="return checkContentname(event)" value=""></div>
                    </div>

                

                <div class="tbl_tr">
                    <div class="tbl_td" width="">ID :</div>

                    <div class="tbl_td">
                        <input style="margin-left: 50px" onchange="tel_err2()" name="cmli" id="form_text" type="text" maxlength="10" onkeypress="return checknum(event)" onblur="/*check2()*/" value="">
                    </div>
                </div>

                <!--//===================================================================================-->
                <!--//===================================================================================-->
                <!--//===================================================================================-->
                <!--        if(){-->
                <div class="tbl_tr" style="display: none">
                    <div class="tbl_td">none disp :</div>
                    <div class="tbl_td" colspan="2" title="">
                        <div>
                            <select name="prov" class="province"></select>
                            <select name="city" class="city"></select>

                        </div>


                    </div>
                </div>
                <!--////////////////////////////////////////================================Form main===========================================================================================================/////////////////-->

            <div class="tbl_tr">
                        <div class="tbl_td" width="">Name :</div>
                        <div class="tbl_td" colspan="2"><input name="fname" id="form_text" type="text" onkeypress="return checkContentname(event)" value=""></div>
                    </div> 
                                    <div class="tbl_tr">
                        <div class="tbl_td">Last Name :</div>
                        <div class="tbl_td" colspan="2"><input name="lname" id="form_text" type="text" onkeypress="return checkContentname(event)" value=""></div>
                    </div>

                

                <div class="tbl_tr">
                    <div class="tbl_td" width="">ID :</div>

                    <div class="tbl_td">
                        <input style="margin-left: 50px" onchange="tel_err2()" name="cmli" id="form_text" type="text" maxlength="10" onkeypress="return checknum(event)" onblur="/*check2()*/" value="">
                    </div>
                </div>

                <!--//===================================================================================-->                <!--////////////////////////////////////////================================Form main===========================================================================================================/////////////////-->

            <div class="tbl_tr">
                        <div class="tbl_td" width="">Name :</div>
                        <div class="tbl_td" colspan="2"><input name="fname" id="form_text" type="text" onkeypress="return checkContentname(event)" value=""></div>
                    </div> 
                                    <div class="tbl_tr">
                        <div class="tbl_td">Last Name :</div>
                        <div class="tbl_td" colspan="2"><input name="lname" id="form_text" type="text" onkeypress="return checkContentname(event)" value=""></div>
                    </div>

                

                <div class="tbl_tr">
                    <div class="tbl_td" width="">ID :</div>

                    <div class="tbl_td">
                        <input style="margin-left: 50px" onchange="tel_err2()" name="cmli" id="form_text" type="text" maxlength="10" onkeypress="return checknum(event)" onblur="/*check2()*/" value="">
                    </div>
                </div>

                <!--//===================================================================================-->                <!--////////////////////////////////////////================================Form main===========================================================================================================/////////////////-->

            <div class="tbl_tr">
                        <div class="tbl_td" width="">Name :</div>
                        <div class="tbl_td" colspan="2"><input name="fname" id="form_text" type="text" onkeypress="return checkContentname(event)" value=""></div>
                    </div> 
                                    <div class="tbl_tr">
                        <div class="tbl_td">Last Name :</div>
                        <div class="tbl_td" colspan="2"><input name="lname" id="form_text" type="text" onkeypress="return checkContentname(event)" value=""></div>
                    </div>

                

                <div class="tbl_tr">
                    <div class="tbl_td" width="">ID :</div>

                    <div class="tbl_td">
                        <input style="margin-left: 50px" onchange="tel_err2()" name="cmli" id="form_text" type="text" maxlength="10" onkeypress="return checknum(event)" onblur="/*check2()*/" value="">
                    </div>
                </div>

                <!--//===================================================================================-->
                </div>



                <!--//===================================================================================-->
                <!--//===================================================================================-->
                <!--//===================================================================================-->

                <!--        -->
                <!--        //================================================================================-->
                <!--        //================================================================================-->
                <!--        //================================================================================-->


            </div>
      </div>
      
<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text



<br>
<br>
</form>    


</div>

</div>

    <div class="spacer_ftr" style="height: 150px;"></div>
</div>
<div class="footer">
    footer
</div>

I use clearfix, display: table and display: table-cell tricks but dosent work

Tristan Pct · Answer 1 · 2020-04-25T18:58:41.107

By adding position: relative; to the body element the sidebar fully expands.

Your .main_menu_mng have a position: absolute; but none of its ancestors is positioned, so your element is positioned relative to the root element (or Initial Containing Block), and from W3C:

The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The 'direction' property of the initial containing block is the same as for the root element.

https://www.w3.org/TR/CSS2/visudet.html#containing-block-details

So, without a parent with a relative position, the height of your element depends on the height of the root element, which is the viewport.

Daniel Groner · Answer 2 · 2020-04-27T07:45:33.173

There is much to improve in your code and different better approaches, but based on your question and your comment to my first answer, I tried to solve what you need with your code.

You could add position: relative; to .inliner_content (in this case it would stop at the footer spacer).

If you add the following CSS to your .content div also the blue form part expands until the footer spacer.

.content {
   position: absolute;
   width: 80%;
}

Here you find an example where I added everything I just described to your code.

.wrap
{
direction: rtl;
  height:100%;
  width: 100%;
}
#menu_icon_mng
{    display: none;
    width: 25px;
    height: 25px;
    background: url(pics/menu_icon.gif) center;
    background-size: 25px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 0;
}

.main_m_mng
{
    /* height: 14%; */
    border-bottom: 1px solid;
    height: 25px;
    line-height: 25px;
    /*      display: inline-block; */
    /*     float: right; */
    padding-right: 10px;
    /*     text-align: center; */
    transition: all 0.5s ease 0s;
    cursor:pointer;
}
.main_m_mng_name
{
    /* height: 14%; */
    border-bottom: 1px solid;
    height: 25px;
    line-height: 25px;
    /*      display: inline-block; */
    /*     float: right; */
    padding-right: 10px;
    /*     text-align: center; */
    /*transition: all 0.5s ease 0s;*/
    /*cursor:pointer;*/
}
.main_m_mng i
{
    margin-left: 15px;
    float: left;
    line-height: 25px;
    /*     display: inline-block; */
    /*     color:white; */
}
.main_m_mng:hover
{
    background-color: #e0dddd;
    padding: 0 20px 0;
    margin: 0 1px 0;
    /*     -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; */
}

/* .main_m_mng:after {
    border-bottom: 1px solid #000;
    content: '';
} */

.sub_menu_mng {
    white-space: nowrap;
    display: none;
}

.inliner_content {
    width: 100%;
    min-height: 77%;
    overflow: hidden;
    position:relative;
    /* display: table; */
    /* padding-bottom: 8px; */
    /* margin-bottom: -19px; */
}

.main_m_link_mng {
    transition: all 0.5s ease 0s;
    width: 100%;
}
.tbl_frm {
    display: block;
}

.tbl_tr {
    display: block;
    margin-bottom: 10px;
}

.tbl_td {
    display: inline-block;
    min-width: 150px;
}

.tbl_thead {
    display: block;
}

.tbl_th {
    display: inline-block;
    min-width: 200px;
    margin: auto;
}
.footer {
    /* position: relative; */
    height: 150px;
    /* margin-top: -150px; */
    background-color: #4a4a4a;
   
    background-size: 116px;
}
.content {
    position: absolute;
    width: 80%;
}

<div class="wrap">
    <div class="inliner_content">

    
<div class="shadow_main_mnu_mng" style="
    display: none;
    /* direction: rtl; */
    font-family: monospace;
    font-size: 12px;
    /* min-height: inherit; */
    /* height: 100%; */
    width: 20%;
    min-width: 150px;
    max-width: 150px;
    background-color: #8a4747;
    float: right;
    /* display: flex; */
    margin-top: 82.7%;
    /* margin-right: -150; */
    /* z-index: 100; */
    padding-bottom: 100%;
    /* margin-bottom: 1px; */
"></div>

<div style="min-height: 100%;height: inherit;/* padding-bottom: inherit; */width: 20%;position: absolute;/* clear: both; */min-width: 150px;max-width: 150px;background-color: #bbb2b2;float: right;/* display: flex; *//* bottom: -62px; *//* flex-direction: column; *//* margin-top: 0; *//* margin-top: -256px; *//* margin-bottom: 40px; */z-index: 100;" class="main_menu_mng">

        <div class="main_m_mng_name">Jack Hue     </div>

        <a href="#" id="menu_icon_mng" onclick="f_menu()" onblur="f_menu()"></a>
        <div class="main_menu_list_mng" id="main_menu_list_mng" style="display: block;">

            <a class="main_m_link_mng" href=".mpnt=nzmnd">
                <div class="main_m_mng">
                    <i class="fa fa-volume-control-phone"></i>Account Setting
                </div>
            </a>
            <a class="main_m_link_mng" href="new/mpnt=nzmnd">
                <div class="main_m_mng">
                    <i class="fa fa-volume-control-phone"></i>Posts
                </div>
            </a>

            <a class="main_m_link_mng" href="?pmodir=2646&amp;mpnt=nzmnd"><div class="main_m_mng">
                    <i class="fa fa-volume-control-phone"></i>Users</div></a>


            <a class="main_m_link_mng">
                <div class="main_m_mng"><i class="fa fa-product-hunt"></i>Admin Users
                </div>
            </a>
            <!-- <div style="position: absolute;z-index: 105;"> -->
            <div id="sub_menu_mng" class="w3-animate-top-menu sub_menu_mng">
                <div><a href="#">sub menu long</a></div>
                <div><a href="?mpnt=test">User Register</a></div>
                <div><a href="#">Sub menu3</a></div>
            </div>
            <!-- </div> -->

            <a class="main_m_link_mng">
                <div class="main_m_mng"><i class="fa fa-product-hunt"></i>New Admin
                </div>
            </a>
            <!-- <div style="position: absolute;z-index: 105;"> -->
            <div id="sub_menu_mng" class="w3-animate-top-menu sub_menu_mng">
     <div><a href="#">sub menu long</a></div>
     <div><a href="?mpnt=test">User Register</a></div>
     <div><a href="#">Sub menu3</a></div>
            </div>
            <!-- </div> -->


            <div class="main_m_mng"><a class="main_m_link_mng"><i class="fa fa-product-hunt"></i> Admin Users old link</a>
                <div style="position: absolute;z-index: 105;">
                    <div id="sub_menu_mng" class="w3-animate-top-menu sub_menu_mng">
       <div><a href="#">sub menu long</a></div>
       <div><a href="?mpnt=test">User Register</a></div>
       <div><a href="#">Sub menu3</a></div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div style="
    /* float: left; */
    /* display: inline-block; */
    /* width: 73%; */
    padding: 0 10px;
    padding-right: 160px;
    /* margin-right: -150px; */
    background-color: blue;
    /* z-index: -4; */
    top: 0;
    min-height: 100%;
" class="content">
        
<script src="ref/cml_chk.js"></script>
<script src="ref/statlist2.js"></script>
<!--<script src="chk_frm_reg.js" ></script>-->
<input type="hidden" class="prov1" value="6">

<form name="frmreg" method="post" onreset="" onsubmit="return display_err1()" style="
    margin-block-end: 0em;
">

    <input type="hidden" name="pr_reg_form" value="139">


        


            <input type="hidden" name="pr_reg_form" value="139">

            <div style="margin-right:15px">

                <div class="tbl_tr">
                                            <div class="tbl_td">Date (Today):</div>
                                        <div class="tbl_td" align="right"> :::::::   
                    </div>
                </div>
            </div>


        <div id="pers_info">
            <div width="100%" border="0" dir="rtl" cellspacing="10px" style="margin-right:15px" class="tbl">
                <div class="tbl_thead">
                <div class="tbl_th" colspan="3">Pers Info
                    <hr>
                    <br></div>
                </div>
                <!--////////////////////////////////////////================================Form main===========================================================================================================/////////////////-->

            <div class="tbl_tr">
                        <div class="tbl_td" width="">Name :</div>
                        <div class="tbl_td" colspan="2"><input name="fname" id="form_text" type="text" onkeypress="return checkContentname(event)" value=""></div>
                    </div> 
                                    <div class="tbl_tr">
                        <div class="tbl_td">Last Name :</div>
                        <div class="tbl_td" colspan="2"><input name="lname" id="form_text" type="text" onkeypress="return checkContentname(event)" value=""></div>
                    </div>

                

                <div class="tbl_tr">
                    <div class="tbl_td" width="">ID :</div>

                    <div class="tbl_td">
                        <input style="margin-left: 50px" onchange="tel_err2()" name="cmli" id="form_text" type="text" maxlength="10" onkeypress="return checknum(event)" onblur="/*check2()*/" value="">
                    </div>
                </div>

                <!--//===================================================================================-->
                <!--//===================================================================================-->
                <!--//===================================================================================-->
                <!--        if(){-->
                <div class="tbl_tr" style="display: none">
                    <div class="tbl_td">none disp :</div>
                    <div class="tbl_td" colspan="2" title="">
                        <div>
                            <select name="prov" class="province"></select>
                            <select name="city" class="city"></select>

                        </div>


                    </div>
                </div>
                <!--////////////////////////////////////////================================Form main===========================================================================================================/////////////////-->

            <div class="tbl_tr">
                        <div class="tbl_td" width="">Name :</div>
                        <div class="tbl_td" colspan="2"><input name="fname" id="form_text" type="text" onkeypress="return checkContentname(event)" value=""></div>
                    </div> 
                                    <div class="tbl_tr">
                        <div class="tbl_td">Last Name :</div>
                        <div class="tbl_td" colspan="2"><input name="lname" id="form_text" type="text" onkeypress="return checkContentname(event)" value=""></div>
                    </div>

                

                <div class="tbl_tr">
                    <div class="tbl_td" width="">ID :</div>

                    <div class="tbl_td">
                        <input style="margin-left: 50px" onchange="tel_err2()" name="cmli" id="form_text" type="text" maxlength="10" onkeypress="return checknum(event)" onblur="/*check2()*/" value="">
                    </div>
                </div>

                <!--//===================================================================================-->                <!--////////////////////////////////////////================================Form main===========================================================================================================/////////////////-->

            <div class="tbl_tr">
                        <div class="tbl_td" width="">Name :</div>
                        <div class="tbl_td" colspan="2"><input name="fname" id="form_text" type="text" onkeypress="return checkContentname(event)" value=""></div>
                    </div> 
                                    <div class="tbl_tr">
                        <div class="tbl_td">Last Name :</div>
                        <div class="tbl_td" colspan="2"><input name="lname" id="form_text" type="text" onkeypress="return checkContentname(event)" value=""></div>
                    </div>

                

                <div class="tbl_tr">
                    <div class="tbl_td" width="">ID :</div>

                    <div class="tbl_td">
                        <input style="margin-left: 50px" onchange="tel_err2()" name="cmli" id="form_text" type="text" maxlength="10" onkeypress="return checknum(event)" onblur="/*check2()*/" value="">
                    </div>
                </div>

                <!--//===================================================================================-->                <!--////////////////////////////////////////================================Form main===========================================================================================================/////////////////-->

            <div class="tbl_tr">
                        <div class="tbl_td" width="">Name :</div>
                        <div class="tbl_td" colspan="2"><input name="fname" id="form_text" type="text" onkeypress="return checkContentname(event)" value=""></div>
                    </div> 
                                    <div class="tbl_tr">
                        <div class="tbl_td">Last Name :</div>
                        <div class="tbl_td" colspan="2"><input name="lname" id="form_text" type="text" onkeypress="return checkContentname(event)" value=""></div>
                    </div>

                

                <div class="tbl_tr">
                    <div class="tbl_td" width="">ID :</div>

                    <div class="tbl_td">
                        <input style="margin-left: 50px" onchange="tel_err2()" name="cmli" id="form_text" type="text" maxlength="10" onkeypress="return checknum(event)" onblur="/*check2()*/" value="">
                    </div>
                </div>

                <!--//===================================================================================-->
                </div>



                <!--//===================================================================================-->
                <!--//===================================================================================-->
                <!--//===================================================================================-->

                <!--        -->
                <!--        //================================================================================-->
                <!--        //================================================================================-->
                <!--        //================================================================================-->


            </div>
      </div>
      
<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text<br>test text



<br>
<br>
</form>    


</div>

</div>

    <div class="spacer_ftr" style="height: 150px;"></div>
</div>
<div class="footer">
    footer
</div>

I use `.spacer_ftr` to have sticky footer in bottom of page and cant remove that — sidoco, Apr 25 '20 at 19:15
It's unclear to me why the `.spacer_ftr` would be needed for a sticky footer, but did my suggestion bring you any closer to your solution? If so, you could explain in more detail what's the still remaining problem with my solution, I could try to edit my answer to address it. — Daniel Groner, Apr 25 '20 at 19:20
I need to remain `.spacer_ftr` and the blue body expand to the bottom but here just fill to end of the form not to the bottom... — sidoco, Apr 26 '20 at 23:31
I edited my answere, so that the blue area also expands to the `.spacer_ftr`. Is this what you were searching for? — Daniel Groner, Apr 27 '20 at 07:46

score 0 · Answer 3 · edited May 03 '20 at 15:12

0

You must use:

body {
    margin: 0;
}

edited May 03 '20 at 15:12

Peyman Mohamadpour

17,954
24
89
100

answered May 02 '20 at 05:31

nozzy

33
1
10

thanks for your reply, but I used this since start this project – sidoco May 02 '20 at 13:06
@sidoco what do u mean by u 'used it since started project'? – nozzy May 04 '20 at 06:39
I use margin =:0 for body, always – sidoco May 16 '20 at 18:00
is that supposed to have `margin = 0` not `margin =:0` – nozzy May 16 '20 at 23:32
Excuse me, I have a mistake in typing, `margin : 0` in css :) – sidoco May 17 '20 at 06:03

The sidebar does not expand to the bottom

3 Answers3