Using CSS to style the footer with a body height set to 100%

I am currently working on an angularJS web app with a basic template structure:

<html>
      <head>
        <link rel="stylesheet" href="style.css" />        
      </head>
    <body id="top">

      <!-- Templates with views will be inserted here -->
      <div class="wrapper" ng-view>
        <div class="language-loaded">    
          <div class="home-top">
            <div class="title-wrapper">
                <h1 class="home-title">Title</h1>   
            </div>
        </div>
        <div>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
        </div>
      </div>
    </div>



    <!-- This is the footer template -->
    <div ng-include src="'partials/footer.html'">          
      <footer id="footer">
        This is the footer
      </footer>
    </div>

Upon rendering, the web page appears as follows:

HTML: 

  <body id="top">
    <div class="wrapper">

  </body>

</html>

CSS:

html, body, .wrapper, .language-loaded, .home-top {height: 100%}
body {  background-color: #F5F5F5}
.home-top {background-color: blue;}
.title-wrapper {
    position: relative;
    top: 39%;
    color: #fff;
  text-align: center;
}

Some components have a height of 100% to ensure that the homepage displays a background image that spans the full height. However, this causes the footer to appear overlapping the main content directly below the background image.

To better understand the issue, please refer to the following Plunker link: https://plnkr.co/edit/gyNOJmc5uzHAEhXwzRuq?p=preview

My goal is to reposition the footer to the bottom of the page, after all the main content has been displayed.

htmlcssangularjs

Answer №1

<div><p>content</p>...</div>
is situated outside of the .home-top container, which has a defined height of 100%, and within the .language-loaded element that also occupies 100% height. As a result, the content is overflowing beyond the boundaries of .language-loaded.

If you are unable to modify the HTML structure, one alternative solution is to remove all instances of height: 100% and replace them with height: 100vh using viewport units for the .home-top section.

body {
  background-color: #F5F5F5
}

.home-top {
  height: 100vh;
  background-color: blue;
}

.title-wrapper {
  position: relative;
  top: 39%;
  color: #fff;
  text-align: center;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body id="top">
  <div class="wrapper">
    <div ng-show="languageLoaded" class="language-loaded">
      <div class="home-top">
        <div class="title-wrapper">
          <h1 class="home-title">Title</h1>
        </div>
      </div>
      <div>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
      </div>
    </div>
  </div>
  <div>
    <footer id="footer" style="background-color: red">
      This is the footer
    </footer>
  </div>
</body>

</html>

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

Implementing Decimal Input in Bootstrap-Vue for Google Chrome on Android

Issue is isolated to Google Chrome for Android (version 90.0.4430.210) and not present in other browsers. We have an input field that only allows numeric characters, structured like this: <b-form-input v-model="manualInput" class ...

javascripthtmlvue.jsbootstrap-vuehtml-input

What is the best way to capture user input using an onClick event in JavaScript and then display it on the screen?

I'm in the process of upgrading a table, and while most of it is working fine, there is one function that's giving me trouble. I want this function to return an input with an inline onClick event. The actual return value is displaying correctly, ...

javascriptjqueryhtmldatatables

Can a file be imported into Node.js without the need for packaging?

Is there a way to have an entire file evaluated in node? For example, let's say I want to evaluate the angular.js source file. An example of what the code could look like is as follows: jsdom = require("jsdom").jsdom; document = jsdom("<html>& ...

javascriptnode.jsangularjs

"Encountering an error with ExpressJS where it cannot GET a file, preventing access to other folders' content

My goal is to set up a simple server using expressJS to retrieve data for my Angular application. However, I've encountered an error that says 'Cannot GET/'. This is the code snippet of the webserver I attempted to create: var express = re ...

javascriptangularjsnode.jsexpresswebserver

How can I wrap content with the <li> element in a cross-browser compatible way?

I am encountering an issue with the dropdown menu on my website located at . When hovering over elements with a dropdown menu, you may notice that some of the items within the dropdown span more than one line and have varying widths. My goal is to adjust ...

csswidthhtml-lists

How can I match dates in order to run the following code?

If Purchase Date is after 31/Mar/xxxx it should not calculate elap_yend, rem_days, depre_cur, cur_wdv. Also I have to calculate GST with some options that is if SGST and CGST are chosen, I should not calculate IGST else if IGST selected or marked it shoul ...

javascriptjqueryhtmlajax

Assign the value from the list to a variable in order to execute an API call

Imagine a scenario where there's a button that displays a random joke based on a specific category. The categories are fetched using an API request from https://api.chucknorris.io/jokes/categories The jokes are generated from https://api.chucknorris. ...

javascripthtmlapi

Ways to track the visit data for different languages in Google Analytics when the language is not included in the URL

On my website, I track Google Analytics by adding the tracking code to the header. The standard implementation of GA tracking is as follows: ga('create', 'UA-483951-1', 'auto'); ga('send', 'page ...

phphtmlcodeignitergoogle-analyticsstatistics

The button text in Bootstrap 5 is black instead of white as shown in their demo

During the installation of Bootstrap 5, I encountered an issue where many of my buttons are displaying a black font instead of the expected white font as shown in the Bootstrap 5 Documentation For instance, the .btn-primary button on the official Bootstra ...

javascriptcsstwitter-bootstraplaravel-8bootstrap-5

How can I verify if an SVG file has a reliable source? (having troubles converting SVG to canvas)

While attempting to use an SVG generated by a chart plugin (https://wordpress.org/plugins/visualizer/), I am facing issues retrieving the source of the SVG-image being created. Interestingly, when using other SVGs with the same code, everything works perfe ...

javascriptjqueryhtmlcanvassvg

Sticky Sidebar Attached to Parent Container with Smooth Sliding Effect

Is it possible to have my sidebar push the content across when opened, while keeping the fixed navigation relative to its parent element instead of the viewport? The sidebar works fine in Firefox but breaks out of the parent in Chrome. Link to JSFiddle & ...

jqueryhtmlcss

Modifying icon color upon button click in Vue 3: A quick guide

I'm currently implementing Vue 3 into my project. Within the database, there are a total of 10 individuals, each of which should have their own card displayed. Users have the ability to add any person to their list of favorites. Below is the code snip ...

javascripthtmlvue.jsvuejs3

The form submission did not yield any results

function calculateCost() { var projectorCost=0,price=0,quantity=0,discountPrice=0,totalCost=0; var modelName=document.getElementById('projectormodel').value; var quantity=document.getElementById('q ...

javascripthtmlcssweb

Designing a logo atop a Jquery tab

In the layout I have designed, there is a header followed by a jQuery Tab navigator. The tabs have padding on the left side, and I want the header image to overlap this area. Currently, the image is hidden behind the tab panel. Which CSS property can be us ...

jquerycsstabs

Elements on the page are quivering as a result of the CSS animation

When a user clicks anywhere on a div, I have added a ripple effect to give it some interaction. However, there is an issue where the element shakes and becomes blurry when the page is in full screen mode until the ripple effect disappears. Below is the Ja ...

javascriptjqueryhtmlcss

I am having trouble retrieving the information stored in an Array of Objects. Specifically, I am having difficulty accessing and iterating through each object using a for

Is there a way to extract data from an API individually and retrieve data from an Array? let {Array}=jsonData fetch("https://apis.ccbp.in/city-bikes?bike_name" + search, options) .then(function(response){ return response.json(); }) .then(funct ...

javascripthtmlcss

Utilize the $(#id).html(content) method to populate the following column with desired content

Here is a snippet of my HTML code: <div class="row margin-top-3"> <div class="col-sm-7"> <h2>NFTs</h2> <div class="table-responsive"> <table class="table table-bordered&qu ...

javascripthtml

The positioning of the text appears to be in the center, but it is actually

Currently, my text "lorum ipsum" is centered in CSS, but I want to align it to the left and add padding on the right later. Can someone explain what I've created here? #ubba { font-family: "Open Sans", sans-serif; font-size: 20px; ...

htmlcss

Guide to incorporating navigation buttons (back and forward) in a modal box

I have successfully created image thumbnails and linked them using the provided code. <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script src="https://maxcdn.bootstra ...

javascriptjqueryhtmlcsstwitter-bootstrap

Automatic Clicks in the Chrome Console

I've come across a website that requires me to click on multiple elements scattered throughout the page Here is the code for one of the elements: <span class="icon icon-arrow-2"></span> Is there a way to provide me with the console comm ...

javascriptjqueryhtmlcssgoogle-chrome