Tips for ensuring a footer stays at the bottom of the page even when there is minimal content in the body and remains responsive

This is a unique layout without any body content.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Online Store | E-Shopper</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet">
    <link href="~/Content/font-awesome.min.css" rel="stylesheet">
    <link href="~/Content/prettyPhoto.css" rel="stylesheet">
    <link href="~/Content/price-range.css" rel="stylesheet">
    <link href="~/Content/animate.css" rel="stylesheet">
    <link href="~/Content/main.css" rel="stylesheet">
    <link href="~/Content/responsive.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="~/Content/images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="~/Content/images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="~/Content/images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="~/Content/images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="~/Content/images/ico/apple-touch-icon-57-precomposed.png">
</head>

<body>

    <header id="header">
        <div class="header-middle">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="logo pull-left">
                            <a href="@Url.Action("Index", "Home")">
                                <img src="~/Content/images/home/logo.png" alt="" />
                            </a>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="shop-menu pull-right">
                            <ul class="nav navbar-nav">
                                @if (Session["Name"] != null)
                                {
                                    <li style="margin-top:10px">
                                        <p>
                                            Welcome
                                            @Session["UserName"].ToString()
                                        </p>
                                    </li>
                                    <li><a href="@Url.Action("EditProfile", "Home",new {id=Session["UserID"] })"><i class="fa fa-user"></i> Account</a></li>
                                    <li>
                                        <a href="@Url.Action("Logout", "Account")">
                                            Logout
                                        </a>
                                    </li>
                                }
                                else
                                {
                                    <li>
                                        <a href="@Url.Action("Login", "Account")">
                                            Login
                                        </a>
                                    </li>
                                }
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-sm-9">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div class="mainmenu pull-left">
                            <ul class="nav navbar-nav collapse navbar-collapse">
                                <li>
                                    <a href="@Url.Action("ListOfProductCategory", "ProductCategory")" class="elements">
                                        <span>Manage Product categories</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="@Url.Action("ListOfProducts", "Product")" class="elements">
                                        <span>Manage Products</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="@Url.Action("ShowUsers", "Home")" class="elements">
                                        <span>Manage Customers</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="@Url.Action("ViewOrders", "Home")" class="elements">
                                        <span>View Orders</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    
    <section>
        <div class="container">
            <div class="row">
                @RenderBody()
            </div>
        </div>
        
        <footer id="footer">
            <div class="footer-bottom">
                <div class="container">
                    <div class="row">
                        <p class="pull-left">Copyright © 2022 Online Store. All rights reserved.</p>
                        <p class="pull-right">Designed by <span><a target="_blank" href="http://www.example.com">Example Company</a></span></p>
                    </div>
                </div>
            </div>
        </footer>
        
        @RenderSection("scripts", required: false)
    </section>

    <script src="~/Scripts/jquery.js"></script>
    <script src="~/Scripts/price-range.js"></script>
    <script src="~/Scripts/jquery.scrollUp.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/jquery.prettyPhoto.js"></script>
    <script src="~/Scripts/main.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
</body>
</html>

The CSS code below applies to the footer section with an ID of footer and a background color of #F0F0E9:

#footer {
  background: #F0F0E9;
}

If you are having trouble keeping the footer at the bottom when there is no body content, you can try adjusting the positioning properties in the CSS or using JavaScript to fix the position dynamically based on the page content.

cssasp.net

Answer №1

Give this a shot:

#footer {
    position: fixed;
    height: 50px;
    width: 100%;
    bottom: 0;
    border-top: 1px solid black;
}

Answer №2

Here is a suggested CSS layout:

*{
  box-sizing: border-box;
}
body, html{
  height: 100%;
  width: 100%;
  margin: 0;
}
body{
  display:flex;
  flex-direction: column;
}
#container
{
    margin: 0 auto;
    width:80%;
    background-color: white;
    border: 0.2em solid black;
    flex-shrink:0;
    flex-grow:1;
    display:flex;
}
#footer
{
    margin: 0 auto;
    width:100%;
    text-align: center;
    height:1.5em;
    background-color: white;
    border: 0.2em solid black;
    flex-shrink:0;
}
.col {
    height:90%;
    flex-shrink:0;
    flex-grow:1;
    margin:0 2% 0 2%;
}
<div id="container">
  <div class="col">
    test column 1
    <p>
    blah blah blah...
    </p>
    <p>
    blah blah blah...
    </p>
    <p>
    blah blah blah...
    </p>
  </div>
  <div class="col">
    test column 2
    <p>
    blah blah blah...
    </p>
    <p>
    blah blah blah...
    </p>
    <p>
    blah blah blah...
    </p>
    <p>
    blah blah blah...
    </p>
  </div>
</div>
<div id="footer">
test content
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide on applying bold formatting to a specific section of text in React

I have a collection of phrases structured like so: [ { text: "This is a sentence." boldSubstrings: [ { offset: 5, length: 2 } ] } ] My goal is to display each phrase as a line using the following format: ...

javascriptcssreactjs

Detecting collisions with other objects in HTML/CSS/JavaScript while animating objects

Does anyone know how to create a dynamic character using css, html, and javascript, and detect collisions with other elements? Any suggestions or guidance would be greatly appreciated. ...

javascriptcsshtmlgraphicsjquery-animate

add the closing </div> tag using jquery only

Having a slight issue here, it seems that jQuery is being overly clever. Within my HTML code, I am attempting to insert this string into a div container: </div><div class="something"> You'll notice that the closing tag comes first, foll ...

javascriptjqueryhtmlcss

DetailsView: Error - Index exceeded the allowed range

I am facing an issue where I need to extract the datakey value from DetailsView and insert it into a form. Despite including all the datakeynames, I am unable to retrieve the value for my formview. I encountered the following error: Index was out of ra ...

c#.netasp.netdetailsview

A step-by-step guide on incorporating RAW css into your Jekyll website

I am experiencing an issue with loading a CSS file on my website. <link rel="stylesheet" href="/assets/css/my_file.css"> This file is located at _assets/css/my_file.css. However, when I try to load the page, the CSS file does no ...

htmlcssjekyll

Issue with spacing between elements in Tailwind/Nuxt - elements appear too close together

There seems to be a spacing issue when using tailwind v3.4.3 on the Tailwind Playground, with extra space added between span elements. <div> <p> <span class="bg-slate-800">TEST</span> <span class="bg-oran ...

cssvuejs3tailwind-cssnuxt3.js

What is the best way to convert an "add a friend" link into a button? It has a different purpose compared to a "send message" link

The feature of sending a private message functions like a button <div><a href="<?php bp_send_private_message_link() ?>" class="myButton"></a></div> when placed in the PHP file below: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

phpcsshyperlinkfriendbuddypress

Applying CSS Styles to a Single Class Only

I have been using Zurb's Foundation to customize the navbar with my own styles, which has been successful so far. However, I encountered an issue with the responsive behavior of the navbar when the viewing container size changes. The navbar adds a sec ...

csszurb-foundation

Whenever I adjust the size of my browser window, my webpage becomes jumbled and

I'm struggling to keep my website layout consistent across different screen sizes. The design looks messy on mobile compared to desktop. Below is the code I'm using. <html> <head> <style> #logo im ...

htmlcss

The sticky navigation bar isn't functioning properly, even though the code worked perfectly on W3School

I recently encountered an issue while trying to create a sticky navbar that would remain fixed after scrolling past a certain point. I found and customized some code from w3schools that included an animation effect, and it worked perfectly in their demo. H ...

javascripthtmlcss

Tips for concealing lengthy text within a select box and automatically wrapping it when displayed as an option

Is there a way to conceal lengthy text within a select box and display it only when the option is selected? I want to hide long text in a select box options, but have some sort of signal to show that more text is available. Is there a javascript solution ...

javascripthtmlcsstextdrop-down-menu

Conceal the excess content by placing it behind a series of stacked div

Within my layout, there is a fixed div called #navigation that houses buttons. Alongside this, there is scrollable content in the form of .card elements. The #navigation div currently displays with a green background for demonstration purposes, as shown b ...

javascriptjqueryhtmlcss

Enlarge an image when hovering over it

I am currently in the process of creating a website and I have encountered an issue. When I hover over an image, I want it to zoom in, but unfortunately it does not zoom within the designated div area. How can I fix this problem? <div class="container" ...

htmlcss

What is the best way to use jQuery to toggle the visibility of a background?

Check out my CSS below: #load-icon { background: url(/Images/loaders/mask-loader.gif); background-repeat: no-repeat; z-index: 99; width: 32px; height: 32px; z-index: 99; margin-top: 9px; margin-bottom: 9px; margin-right: 5px; ...

jqueryhtmlcss

Replace the image with text inside an anchor when the anchor is being hovered

I want a logo (we'll call it .item-logo) to be shown inside a circle when not being hovered over, but when you hover over the container, the date should be displayed. Here is the HTML code: <div id="main-content" class="container animated"> ...

javascriptjqueryhtmlcss

Cheerio uses CSS selectors to target specific image sources within the HTML document

I'm having trouble extracting a specific src attribute const img1 = selector .find("li.gallery_thumbItem.s-gallery_thumbItem:nth-child(3) span.gallery_thumbIn> img:last-child") .attr("src"); The webpage contains: https://i.sstatic.net/zeBPG ...

jquerycssnode.jsexpresscheerio

Styling unique text in an HTML text area

In the process of creating a web-based SQL editor, I am looking for a way to apply unique styling to certain SQL keywords (such as select, create, from) while a user is typing. Is there a way to achieve this using HTML alone? Alternatively, are there any ...

htmlcssformatting

Styling the navigation menu for mobile devices

How can we transition from a menu like this : https://i.sstatic.net/qQ2k1.png to this when the screen size reaches a specific width: https://i.sstatic.net/AUM4v.png In essence, replacing certain texts with icons. Is pre-defining it and changing the dis ...

css

JQuery keyup event - troubleshooting show/hide errors

There seems to be a problem with the jQuery keyup function. Currently, when data is entered into one field, errors in all other fields are hidden. However, the desired behavior is to show or hide only the error message for the specific field being interact ...

htmljquerycss

Manage User Preferences - Working with Checkbox Controls in User Control

I have developed a Table User control that contains checkboxes in each cell. How can I retrieve the attributes of the selected checkboxes on the default.aspx page? I have placed the Table user control onto default.aspx by dragging it. <uc1:SchTable ...

c#asp.net