The size of the button in the footer varies depending on the length of each page it appears on

I have been working on designing a footer that will be displayed on every page of the website layout. The footer contains two div tags that function as buttons. However, I am facing an issue where the buttons appear smaller on some screens and larger on others. It seems that if the content of the page does not fill the entire height of the screen, the buttons are the correct size. But when the content exceeds the screen height, the buttons shrink in size. I believe they should maintain a consistent height regardless of the page content.

Below are screenshots illustrating the issue:

Screenshot 1 Screenshot 2

.footer {
  bottom: 0;
  background-color: #EEEEEE;
  width: 100%;
  height: 100%;
}
/* CSS styling continues... */

<div class="footer">
  <div class="footer-container">
    <div class="footer-list">
      <li class="footer-left">
        <img src="~/content/images/logo-icon.png">
      </li>
      <li class="footer-item">
        <div class="footer-button footer-help-center">Help Center</div>
      </li>
      <li class="footer-item">
        <a href="@Url.RouteUrl(" ContactUs ")">
          <div class="footer-button footer-contact-us">Contact Us</div>
        </a>
      </li>
    </div>
  </div>
</div>

htmlcss

Answer №1

Relative length units determine a length in relation to another length property. These units offer better scalability across various rendering mediums.

rem: Relative to the font-size of the root element

CSS Units

It is important to note that when using rem, the size may vary depending on the root element's font size or the browser's default font size. This can result in slight variations in how your website is rendered across different browsers.

Answer №2

To start, make sure you wrap your <li> elements in a <ul> element. Also, it's important to remove unnecessary elements, like the div inside the <a> tag.

.footer {
  bottom: 0;
  background-color: #EEEEEE;
  width: 100%;
  height: 100%;
}

.footer-container {
  margin: 0 auto;
  max-width: 1200px;
  padding-bottom: 15px;
  border-bottom: 1px solid #cccccc;
}

.footer-list {
  display: flex;
  list-style-type: none;
  justify-content: flex-end;
  margin: 0;
  padding-top: 15px;
  color: #444444;
}

.footer-left {
  margin-right: auto;
  padding-top: 15px;
  padding-left: 10px;
}

.footer-item {
  font-size: .9rem;
  margin-right: 1rem;
  padding-top: 9px;
}

.footer-button {
  text-align: center;
  text-decoration: none;
  font-size: 0.9rem;
  margin: 2px 2px;
  cursor: pointer;
  border-radius: 4px;
}

.footer-help-center {
  background-color: #0B5C8E;
  border: 2px solid #0B5C8E;
  color: white;
  padding: 5px 30px 5px 30px;
}

.footer-contact-us {
  background-color: deepskyblue;
  border: 2px solid #0B5C8E;
  color: white;
  padding: 5px 30px 5px 30px;
}
<div class="footer">
  <div class="footer-container">

    <ul class="footer-list">
      <li class="footer-left">
        <img src="~/content/images/logo-icon.png">
      </li>
      <li class="footer-item">
        <a class="footer-button footer-help-center">Help Center</a>
      </li>
      <li class="footer-item">
        <a href="@Url.RouteUrl(" ContactUs ")" class="footer-button footer-contact-us">
          Contact Us
        </a>
      </li>
    </ul>

  </div>
</div>

Answer №3

Although I attempted to experiment with it, I'm unable to precisely replicate the issue you're describing aside from noticing the text wrapping when the window is narrowed. It appears that the css for footer-contact-us is absent, but I suspect it's similar to footer-help-center.

If you desire the buttons to maintain a consistent height, why not simply specify their height?

.footer-button {
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.9rem;
  margin: 2px 2px;
  cursor: pointer;
  border-radius: 4px;
  height:20px;
  line-height:20px;
}

Answer №4

Feel free to utilize the following code snippet:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Hello, world!</title>
  <style type="text/css">
    body {
      margin: 0;
    }
    
    .footer {
      bottom: 0;
      background-color: #EEEEEE;
      width: 100%;
      height: 100%;
    }
    
    .footer-container {
      margin: 0 auto;
      max-width: 1200px;
      padding-bottom: 15px;
      border-bottom: 1px solid #cccccc;
    }
    
    .footer-list {
      display: flex;
      list-style-type: none;
      justify-content: flex-end;
      margin: 0;
      padding-top: 15px;
      color: #444444;
    }
    
    .footer-left {
      margin-right: auto;
      padding-top: 5px;
      padding-left: 10px;
    }
    
    .footer-item {
      margin-right: 1rem;
    }
    
    .footer-button {
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 0.9rem;
      margin: 2px 2px;
      cursor: pointer;
      border-radius: 4px;
    }
    
    .footer-help-center.success {
      background-color: #0B5C8E;
      border: 2px solid #0B5C8E;
      color: white !important;
      padding: 5px 30px 5px 30px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .footer-contact-us.info {
      background-color: #33691e;
      border: 2px solid #33691e;
      color: white !important;
      padding: 5px 30px 5px 30px;
      font-size: 14px;
      cursor: pointer;
      outline: none;
      box-shadow: none;
      text-decoration: none;
    }
  </style>
</head>

<body>
  <div class="footer">
    <div class="footer-container">
      <div class="footer-list">
        <li class="footer-left">
          <img src="~/content/images/logo-icon.png">
        </li>
        <li class="footer-item">
          <a class="btn success footer-button footer-help-center">Help Center</a>
        </li>
        <li class="footer-item">
          <a class="btn info footer-button footer-contact-us" href="@Url.RouteUrl(" ContactUs ")">Contact Us</a>
        </li>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</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

What impact do negative positioning have on CSS elements in terms of responsibility?

Just diving into CSS and I have a question to pose: Is it considered good practice to utilize negative positioning in CSS? Are there potential compatibility issues with browsers like IE7 and IE8? What is your suggestion? #example-bottom { position: relat ...

htmlcssinternet-explorer

Differences between using tables and divs for form layouts

After searching online for examples of form implementations using DIVs, I noticed that most were simple one-column forms. However, my forms are more complex, like the one shown in this image: Although I can easily create these forms using tables, I encoun ...

htmlcssformstablelayout

The layout of webpages on Internet explorer 11 or IE 8 may appear differently than on Chrome or Mozilla

While coding a webpage using cshtml, I encountered an issue with a link pointing to a doc or pdf file in a Windows server location. In Windows Explorer, the file could be opened by clicking the link, but Chrome or Mozilla did not allow me to open the file ...

htmlcssinternet-explorergoogle-chromerazor

What is the best way to format the incoming data to display as HTML code?

My textarea has a v-model called content where input text is assigned to content.description. Now, I need to transfer this information to another element, specifically a div. The challenge lies in the fact that if my textarea includes HTML code, I want it ...

javascripthtmlvue.js

I attempted to layer multiple images on top of each other, but unfortunately, the background has disappeared

I am attempting to align a series of images together, but I seem to have lost the background in the process. I am using "position:absolute" and while the images stack nicely due to their correct sizes, there seems to be an issue with the backgrounds. My go ...

htmlcss

What could be causing my Bootstrap website to not extend to the full width of the screen?

I'm a budding Web Designer and Developer, and I'm facing an issue with my code not extending the full width of the screen while using the Bootstrap framework for a current project. Despite having created similar landing pages in the past without ...

htmlcssbootstrap-4responsiveness

Learning to extract information from elements within components in a flexbox using Angular

Is there a way to access the element width of child components within a parent component that utilizes flex box? I am hoping to determine if the list is overflowed so I can adjust the visibility of elements accordingly. If an overflow occurs, I would like ...

htmlcssangularflexbox

An image that is in motion at an inappropriate time

My website has run into an issue. Within the navigation bar, there are two unordered lists containing list items and nested ul tags with images in some of the list items. When applying animations, the image moves along with the tabs. Here are visual exampl ...

htmlcss

Preventing scrolling on the parent/body element while a modal is active in a react application

I have come across many questions similar to this. In my React project, I am trying to prevent the parent/body from scrolling when a modal/popup is in hover or focus. I want the parent scroll bar to remain visible but disabled when the modal is hovered o ...

javascripthtmlcssreactjs

Make text come to life as the user scrolls across a fixed positioned div

As the user scrolls, I am attempting to animate four headings. First, I create a sticky positioned div. Then, as the user scrolls over the headings, each one toggles the class .active sequentially, with the last one remaining visible and the scrolling cont ...

javascripthtmlcsssticky

What is the best way to combine HTML and Django?

I need help with an HTML file containing a web page design featuring a form where users can enter their name. My goal is to create a six-entry array for each submission to store information for later use on another page. Would Django be the best tool for ...

pythonhtmlcssdjango

What steps can be taken to resolve the issue of Ajax not retrieving any data from

I'm struggling to identify the error in this code. I have created a search bar and implemented AJAX to automatically fetch data. Here is the HTML file: <!DOCTYPE html> <html> <head> <title></title> <script ...

javascriptphpjqueryhtmlobject

Reducing the size of an internal label within a flex container

Hello everyone, I could really use some assistance here. The problem I'm facing involves a flex-container with tabs (the number of tabs can vary as they are passed as an array in a React component). Each tab consists of a label and a span with a numb ...

cssreactjsflexboxwidthstyled-components

What is the best way to design a send button in a comment textbox to resemble the one in the Facebook app?

As a beginner in coding, I am trying to recreate the comment section of the Facebook app where the send icon is integrated into the textarea and positioned at the right end. Although I have been experimenting with some code, I am facing issues where the t ...

htmlcssionic-framework

Linking jQuery UI tabs to tabs on a different pageWould you like assistance

I am facing a challenge that I need help with. For a school project, I have to create 8 pages of HTML, each with a template and a menu. The menu consists of tabs that are supposed to link to separate pages when clicked. However, the issue is that when I cl ...

jqueryhtmltabs

Looking for a solution to create a stationary header on iOS devices running version

I am facing an issue where the header on my page is not fixed at the top when the keyboard appears. Instead, whenever I click on a text box, the keypad comes up and the entire page, including the header, moves to the top. This requires the user to scroll t ...

javascriptioshtmlcssjquery-mobile

Utilizing jQuery to dynamically load and display multiple files within a single div, replacing any previously loaded content

Forgive my lack of experience, as I am just starting out with this and it may be a simple issue. My goal is to have an empty div (popBox) load a file when a link is clicked, but currently I am struggling to overwrite the content in the div when clicking o ...

jqueryhtmllaravellaravel-4

Creating additional fields in the MySQL database specifically for the newsletter

While I have a basic understanding of PHP and MySQL, creating a newsletter from scratch has proven to be quite challenging for me. Luckily, I stumbled upon a newsletter tutorial on Git Hub that caught my attention. I am interested in implementing this new ...

phphtmlmysqlajaxnewsletter

What is the process for changing the URL displayed in the address bar for each individual page?

Hey everyone, I need some help with a website issue I'm having. Let me explain what I'm trying to accomplish. My website www.website.com has several pages and is currently hosted on Apache via Aruba www.website.com/site/index.php ...

html.htaccessurl

Combining HTML pages with Laravel framework

I successfully integrated an HTML template with multiple pages into my Laravel project. The main page is functioning properly, but I am encountering issues when trying to navigate to the other HTML pages through links on the main page. However, typing the ...

phphtmllaravelintegration