1

hi i'm working on a admin template. I converted the html codes into mvc structure. Now i am stuck , when i create a page using the layout in the shared folder the footer goes up to the navigation bar. for more understanding check the screenshot enter image description here

enter image description here

enter image description here

here is my _layoutadmin.cshtml

   <div class="container body">

    <div class="main_container">
        <div class="col-md-3 left_col">
            <div class="left_col scroll-view">
                <div class="navbar nav_title" style="border: 0;">
                    <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Admin Panel</span></a>
                </div>
                <div class="clearfix"></div>
                <!-- menu prile quick info -->
                <div class="profile">
                    <div class="profile_pic">
                        <img src="~/Content/admin/AdminLogo.jpg" alt="..." class="img-circle profile_img"/>
                        @*<img src="images/img.jpg" alt="..." class="img-circle profile_img">*@
                    </div>
                    <div class="profile_info">
                        <span>Welcome,</span>
                        <h2>John Doe</h2>
                    </div>
                </div>
                <!-- /menu prile quick info -->
                <br />
                <!-- sidebar menu -->
                <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
                    <div class="menu_section">
                        <h3>General</h3>
                        <ul class="nav side-menu">
                            <li>
                                <a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
                                <ul class="nav child_menu" style="display: none">
                                    <li>
                                        <a href="index.html">Dashboard</a>
                                    </li>
                                    <li>
                                        <a href="index2.html">Dashboard2</a>
                                    </li>
                                    <li>
                                        <a href="index3.html">Dashboard3</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
                                <ul class="nav child_menu" style="display: none">
                                    <li>
                                        <a href="form.html">General Form</a>
                                    </li>
                                    <li>
                                        <a href="form_advanced.html">Advanced Components</a>
                                    </li>
                                    <li>
                                        <a href="form_validation.html">Form Validation</a>
                                    </li>
                                    <li>
                                        <a href="form_wizards.html">Form Wizard</a>
                                    </li>
                                    <li>
                                        <a href="form_upload.html">Form Upload</a>
                                    </li>
                                    <li>
                                        <a href="form_buttons.html">Form Buttons</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a><i class="fa fa-desktop"></i> UI Elements <span class="fa fa-chevron-down"></span></a>
                                <ul class="nav child_menu" style="display: none">
                                    <li>
                                        <a href="general_elements.html">General Elements</a>
                                    </li>
                                    <li>
                                        <a href="media_gallery.html">Media Gallery</a>
                                    </li>
                                    <li>
                                        <a href="typography.html">Typography</a>
                                    </li>
                                    <li>
                                        <a href="icons.html">Icons</a>
                                    </li>
                                    <li>
                                        <a href="glyphicons.html">Glyphicons</a>
                                    </li>
                                    <li>
                                        <a href="widgets.html">Widgets</a>
                                    </li>
                                    <li>
                                        <a href="invoice.html">Invoice</a>
                                    </li>
                                    <li>
                                        <a href="inbox.html">Inbox</a>
                                    </li>
                                    <li>
                                        <a href="calender.html">Calender</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a>
                                <ul class="nav child_menu" style="display: none">
                                    <li>
                                        <a href="tables.html">Tables</a>
                                    </li>
                                    <li>
                                        <a href="tables_dynamic.html">Table Dynamic</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
                                <ul class="nav child_menu" style="display: none">
                                    <li>
                                        <a href="chartjs.html">Chart JS</a>
                                    </li>
                                    <li>
                                        <a href="chartjs2.html">Chart JS2</a>
                                    </li>
                                    <li>
                                        <a href="morisjs.html">Moris JS</a>
                                    </li>
                                    <li>
                                        <a href="echarts.html">ECharts </a>
                                    </li>
                                    <li>
                                        <a href="other_charts.html">Other Charts </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="menu_section">
                        <h3>Live On</h3>
                        <ul class="nav side-menu">
                            <li>
                                <a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
                                <ul class="nav child_menu" style="display: none">
                                    <li>
                                        <a href="e_commerce.html">E-commerce</a>
                                    </li>
                                    <li>
                                        <a href="projects.html">Projects</a>
                                    </li>
                                    <li>
                                        <a href="project_detail.html">Project Detail</a>
                                    </li>
                                    <li>
                                        <a href="contacts.html">Contacts</a>
                                    </li>
                                    <li>
                                        <a href="profile.html">Profile</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
                                <ul class="nav child_menu" style="display: none">
                                    <li>
                                        <a href="page_404.html">404 Error</a>
                                    </li>
                                    <li>
                                        <a href="page_500.html">500 Error</a>
                                    </li>
                                    <li>
                                        <a href="plain_page.html">Plain Page</a>
                                    </li>
                                    <li>
                                        <a href="login.html">Login Page</a>
                                    </li>
                                    <li>
                                        <a href="pricing_tables.html">Pricing Tables</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- /sidebar menu -->

            </div>
        </div>
        <!-- top navigation -->
        <div class="top_nav">
            <div class="nav_menu">
                <nav class="" role="navigation">
                    <div class="nav toggle">
                        <a id="menu_toggle"><i class="fa fa-bars"></i></a>
                    </div>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="">
                            <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <img src="images/img.jpg" alt="">John Doe
                                <span class=" fa fa-angle-down"></span>
                            </a>
                            <ul class="dropdown-menu dropdown-usermenu animated fadeInDown pull-right">
                                <li>
                                    <a href="javascript:;">  Profile</a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <span class="badge bg-red pull-right">50%</span>
                                        <span>Settings</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">Help</a>
                                </li>
                                <li>
                                    <a href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a>
                                </li>
                            </ul>
                        </li>

                    </ul>
                </nav>
            </div>
        </div>
        <!-- /top navigation -->
        <!-- page content -->
        <div class="right_col" role="main">
            <!-- top tiles -->
            @RenderBody()

            <!-- footer content -->
            <footer>
                <div class="copyright-info">
                    <p class="pull-right">
                        Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
                    </p>
                </div>
                <div class="clearfix"></div>
            </footer>
            <!-- /footer content -->
        </div>
        <!-- /page content -->
    </div>
</div>
<div id="custom_notifications" class="custom-notifications dsp_none">
    <ul class="list-unstyled notifications clearfix" data-tabbed_notifications="notif-group"></ul>
    <div class="clearfix"></div>
    <div id="notif-group" class="tabbed_notifications"></div>
</div>
6
  • can you post your CSS files? Or else, you can inspect the element and its css properties in the developer tools of a browser Commented Jul 5, 2017 at 9:40
  • its a admin template it contains the bootstrap css Commented Jul 5, 2017 at 9:41
  • share your cshtml file to find the problem Commented Jul 5, 2017 at 10:04
  • layout.cshtml or the page i created using the layout Commented Jul 5, 2017 at 10:06
  • Have you tried moving the footer out to parent div of right_Col div?? Commented Jul 5, 2017 at 10:15

1 Answer 1

1

Using <footer> tag in HTML does not create a sticky bottom footer.
Have a look to this Bootstrap example

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.