How can I adjust the view port height to display the footer on the screen without the need for a scroll

Exploring some css techniques. I'm attempting to display the footer on the page without requiring a scrollbar. My approach involves subtracting the footer's height from the content wrapper div. Unfortunately, this method doesn't seem to be effective.

@media (min-width: 769px) {
  .wrap {
    /* for Sticky Footer */
    /* viewport height aspect ratio, with 100 being 100% of view port height */
    /* using calc function to calculate 100% of viewport minus footer height */
    min-height: calc(100vh - 121px);
  }
  .container {
    /*color: red;
    */
    width: 70%;
    margin: 0 auto;
    max-width: 1000px;
  }
}
<div class="wrap">
  <header class="main-header">
    <div class="container">
      <h1 class="name"><a href="#">Best City Guide</a></h1>
      <ul class="main-nav">
        <li><a href="#">ice cream</a></li>
        <li><a href="#">donuts</a></li>
        <li><a href="#">tea</a></li>
        <li><a href="#">coffee</a></li>
      </ul>
    </div>
  </header>
  <div class="container">
    <h2>Welcome!</h2>
    <p>Everything in this city is worth waiting in line for.</p>
    <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
    <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>

    <h2>Great food</h2>
    <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love.
      Gummi bears pie gingerbread lollipop.</p>
  </div>
</div>
<footer class="main-footer">
  <p>&copy;2015 Residents of The Best City Ever.</p>
</footer>

Any thoughts on why it's not functioning as intended?

htmlcss

Answer №1

Consider using max-height instead of min-height, and remember to include overflow-y:scroll

@media (min-width: 769px) {
  .wrap {
    /* for Sticky Footer */
    /* view port height, 100 is 100% of view port height */
    /* calc is a function for doing math expressions.
        100% of viewport minus footer height */
    max-height: calc(100vh - 121px);
    overflow-y: scroll;
  }
  .container {
    /*color: red;
    */
    width: 70%;
    margin: 0 auto;
    max-width: 1000px;
  }
}

.wrap {
    max-height: calc(100vh - 121px);
    overflow-y: scroll;
  }
<div class="wrap">
  <header class="main-header">
    <div class="container">
      <h1 class="name"><a href="#">Best City Guide</a></h1>
      <ul class="main-nav">
        <li><a href="#">ice cream</a></li>
        <li><a href="#">donuts</a></li>
        <li><a href="#">tea</a></li>
        <li><a href="#">coffee</a></li>
      </ul>
    </div>
  </header>
  <div class="container">
    <h2>Welcome!</h2>
    <p>Everything in this city is worth waiting in line for.</p>
    <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
    <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>

    <h2>Great food</h2>
    <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love.
      Gummi bears pie gingerbread lollipop.</p>
  </div>
</div>
<footer class="main-footer">
  <p>&copy;2015 Residents of The Best City Ever.</p>
</footer>

Answer №2

footer.main-footer{
      position: fixed;
    bottom: 0;
    background: #1f93ce;
    width: 100%;
    padding: 20px;
    color: #fff;
}

<body>
    <div class="wrap">
            <header class="main-header">
                <div class="container">
                    <h1 class="name"><a href="#">Best City Guide</a></h1>
                    <ul class="main-nav">
                        <li><a href="#">ice cream</a></li>
                        <li><a href="#">donuts</a></li>
                        <li><a href="#">tea</a></li>
                        <li><a href="#">coffee</a></li>
                    </ul>
                 </div>
            </header>

            <div class="container">
                <h2>Welcome!</h2>
                <p>Indulge in the delights of our city.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <p>Savor the flavors and embrace the culinary journey that awaits you here.</p>

                <h2>Culinary Adventures</h2>
                <p>Experience a symphony of flavors with every bite. From decadent desserts to savory dishes, your taste buds are in for a treat.</p>
            </div>
        </div>
        <footer class="main-footer">
            <p>&copy;2021 Discover the Best City Ever.</p>

    </footer>
</body>

@media (min-width: 769px) {
  .wrap {
    /* for Sticky Footer */
    /* view port height, 100 is 100% of view port height */
    /* calc is a function for doing math expressions.
        100% of viewport minus footer height */
    max-height: calc(100vh - 121px);
    overflow-y: scroll;
  }
  .container {
    /*color: red;
    */
    width: 70%;
    margin: 0 auto;
    max-width: 1000px;
  }
}

.wrap {
    max-height: calc(100vh - 121px);
    overflow-y: scroll;
  }
<div class="wrap">
  <header class="main-header">
    <div class="container">
      <h1 class="name"><a href="#">Best City Guide</a></h1>
      <ul class="main-nav">
        <li><a href="#">ice cream</a></li>
        <li><a href="#">donuts</a></li>
        <li><a href="#">tea</a></li>
        <li><a href="#">coffee</a></li>
      </ul>
    </div>
  </header>
  <div class="container">
    <h2>Welcome!</h2>
    <p>Everything in this city is worth waiting in line for.</p>
    <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
    <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>

    <h2>Great food</h2>
    <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love. 
Gummi bears pie gingerbread lollipop.</p>
  </div>
</div>
<footer class="main-footer">
  <p>&copy;2015 Residents of The Best City Ever.</p>
</footer>

@media (min-width: 769px) {
  .wrap {
    /* for Sticky Footer */
    /* view port height, 100 is 100% of view port height */
    /* calc is a function for doing math expressions.
        100% of viewport minus footer height */
    max-height: calc(100vh - 121px);
    overflow-y: scroll;
  }
  .container {
    /*color: red;
    */
    width: 70%;
    margin: 0 auto;
    max-width: 1000px;
  }
}

.wrap {
    max-height: calc(100vh - 121px);
    ...

    /* Footer styling */
    footer.main-footer{
        position: fixed;
    bottom: 0;
    background: #1f93ce;
    width: 100%;
    padding: 20px;
    color: #fff;
    }

  }
<body>
    ...

Answer №3

Check out this awesome CSS snippet...

footer.main-footer{
    position: fixed;
    bottom: 0;
    background: #1f93ce;
    width: 100%;
    padding: 20px;
    color: #fff;
}

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

Enhancing the menu/navigation bar with individual AJAX loaders

I have chosen the Vivant Designs theme for our website, which can be found at What I am looking to achieve is an ajax loader that will appear next to the link or tab when a user clicks on a link within the drilldown menu located on the left side. The cont ...

javascriptjqueryhtmlajax

What is causing the #wrapper element to not fully contain all of its content within?

I am struggling to figure out why the wrapper on this page is not properly wrapping the content. It's only 332px tall for some reason when it should be the height of the content, which is causing the footer to pull up to the top of the page. Could I b ...

htmlcsswrapper

Storing information in the concealed and interactive tabs within a tabview system

In my program, users are able to access groups through a left column list, similar to how Google Groups are displayed (seen in the image below). I would like the front-end to cache visited groups as users switch between them, so that when they revisit a g ...

javascriptjqueryhtmlcachingoptimization

Element remains hidden when position set to relative

I have created a panel inside a container class. The panel's CSS is as follows: .panel { width: 100%; background: url(img/launch1.png); height: 80%; background-size: cover; background-position: center; position: relative; ...

htmlcss

Can you help me identify the issue with my current Jade for loop implementation?

Here is my full loop code written in Jade: block content div(class='row') div(class='col-lg-12') h1(class='subject') 로또라이 div(class='row') div(class='col-lg-8') - for (var ...

javascripthtmlnode.jsexpresspug

What is the best way to set a parent element's width to be the same as one of

Is it possible to make the width of div.main match that of table.tbl2? In this scenario, I want inline4 to be on the second line and for the width of div.main to be identical to the width of table.tbl2. .container { text-align: center; } .main { di ...

htmlcss

Rendering of @font-face on Windows 7 was executed flawlessly

I have been utilizing @font-face to implement custom fonts on a website. The custom font displays correctly in Firefox, IE, Safari, and Chrome on Mac. However, when viewed on Chrome in Windows 7, the text appears green at 10px instead of black or grey. ... ...

cssgoogle-chromefont-faceembedded-fonts

Tips for ensuring a functioning dropdown menu while maintaining a fixed navigation bar position

I am facing an issue with my navigation bar. I have set the position to fixed to keep it at the top, but this is causing the drop-down functionality to stop working. Please advise on where I should move the position fixed property so that my nav bar remai ...

htmlcss

Learn how to incorporate an image into your Codepen project using Dropbox and Javascript, along with a step-by-step guide on having the picture's name announced when shown on the screen

Hey there, I'm in need of some assistance. I have a Codepen page where I am working on displaying 4 random shapes (Square, Triangle, Circle, and Cross) one at a time, with the computer speaking the name of each shape when clicked. I want to pull these ...

javascripthtmlimagedropboxcodepen

Implementing timeAgo with jQuery (or a similar tool) to display the elapsed time since a user (client) accesses or updates a webpage

https://i.sstatic.net/Y7bzO.png Currently, the timer displayed always shows the actual time instead of phrases like "about a minute ago" or "5 minutes ago". I have tried different solutions without success. //timeago by jQuery (function timeAgo(selector) ...

javascriptjqueryhtmltimertimeago

Is there a way to retrieve the value of an HTML form in order to utilize it within a JavaScript function

I am currently working on developing a temperature converter that utilizes a single number input form. When the form is submitted, it should convert the temperature to either Fahrenheit or Celsius. Unfortunately, as a beginner in JavaScript, I have limited ...

javascripthtml

Adjust the size of the clickable region

I'm struggling to figure out how to adjust the click area. Below are the details: https://i.sstatic.net/bdbZ8.png Looking at the image, you can see that the cursor is quite far from the letter, yet it still registers as clickable at that distance. ...

htmlcss

The response from my ajax call is accurate, but it does not seem to be triggering any action

My current project involves creating a like/dislike button using ajax. The data is sent to a separate file where it gets saved in a database. Upon successful completion, the response I receive back is: {"status":"success","message":"Like has been saved."," ...

phphtmlajax

How to align buttons in the center of a Bootstrap grid column using Angular's *ngFor directive

I have been trying to center some buttons using the bootstrap 4 grid system within a column with a green border. Despite using justify-content-center, I have not been successful so far. <div class="row" style="border:1px solid red;"& ...

cssbootstrap-4bootstrap-grid

Guide to creating adaptive content using React and Material UI

For my current project, I am working on designing a product detail page using React and Material UI. The challenge I am facing is ensuring that the page remains responsive across different screen sizes. Specifically, I am struggling with the description se ...

htmlreactjsresponsive-designmaterial-ui

How well do social media share buttons perform on websites

I'm experiencing issues with the performance of my gallery ever since I added social buttons. Currently, there are around 30 thumbnails in the gallery, each accompanied by four social buttons for different services like Facebook, Google Plus, Twitter ...

phphtmlperformanceshare-button

Optimized layout for screen resolutions exceeding 1000 pixels wide

As I work on making my website responsive using Dreamweaver CC, I'm encountering a problem with screen sizes larger than 1000px. In Dreamweaver, there are three options for responsive web design at the bottom: desktop 1000px and less, tablet 768px an ...

htmlcssresponsive-design

The functionality of CSS transform appears to be malfunctioning on Firefox browser

My website, located at , features a logo that is centered within a compressed header. I achieved the centering effect using the following CSS command: .html_header_top.html_logo_center .logo { transform: translate(-63%, -2%); } This setup works perfe ...

css

Mastering the art of obtaining XPaths through Selenium WebDriver

While working on test automation for a section of Outlook Web App, I focused on checking a designated test mailbox that receives emails from our company. I needed to verify specific texts within an email using Assert, but encountered difficulty in identify ...

javahtmlseleniumselenium-webdriverxpath

menu featuring a creative favicon and an accompanying label

I am aiming to replicate this menu design: It consists of a flavicon with a label below it. Menu I attempted to create it in two different ways, but both attempts were unsuccessful. Using Bootstrap groups. <link rel="stylesheet" href="https://u ...

cssbootstrap-4