Content that refuses to stretch

Lately, I've been working on making sure my footer stays at the bottom of the page while allowing the middle content to stretch so that the footer placement will be correct regardless of the resolution the website is viewed in.

It has been a bit since I last edited this website and I have forgotten most of the steps I took to maintain the layout. Now, I have discovered another issue :(

Currently, my content does not stretch properly. When I add text to the content area, it ends up going behind the footer without stretching to the bottom as intended, ignoring the background image..

If anyone has any insight into what might be causing this problem, please share with me? :(

Answer №1

It appears there are some improvements that could be made to enhance the appearance of your website. I noticed that your footer is set to position: relative; which seems unnecessary. I believe changing it to position: absolute; and adding bottom: 0px; would make more sense as it will fix the footer to the bottom of the page. Keeping the footer's position as fixed is not advisable.

To ensure that no content goes below the footer, it is recommended to add a bottom padding to the content equal to the height of the footer. This way, you will have enough space for the footer without any overlap of content.

If my explanation makes sense to you, feel free to let me know. Best of luck with your project!

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

Create a smooth scrolling effect for a div with a fixed position

Having trouble scrolling a fixed position div on the page? Are you using this jquery script: $('html, body').animate({ scrollTop: $(".example").offset().top }, 750); I had to set the body overflow property to hidden for another issue. The ...

javascript jquery css

effortlessly eliminate the Google MyMap watermark from an iframe using ReactJS

I am new to ReactJS and I would like help on how to hide the watermark on a Google My Map. Can someone please assist me with this? <iframe src="https://www.google.com/maps/d/u/1/embed?mid=1OMSkPKZi-U-CnmBr71zByNxp8HYi-vOc&ehbc=2E312F" fram ...

javascript html css reactjs

Tips For Making Your Bootstrap 4 Page Fit Perfectly on Mobile Screens

Currently in the process of developing . The frontpage has been created and tested using Chrome's dev console's device toolbar. Ensured that the correct viewport is set and utilized Bootstrap's column system for stacking elements. However, ...

html css mobile bootstrap-4

What could be causing the failure of the update for this computed property in my Vue 3 application?

Currently, I am in the process of creating an audio player using Vue 3 and the Napster API. About the Project I have managed to make the vinyl rotate by utilizing a CSS keyframes-based animation paired with the computed property isSpinning. I intend for ...

javascript css vue.js vuejs3

Having difficulty refreshing metadata on the client side within Next.js through client-side data retrieval

Having some trouble with updating metadata using NextSeo when fetching data on the client side. useEffect(()=>{ fetch(assetURL) .then((res) => res.json()) .then((data) => { console.log(data); }) .catch((error) => { console.err ...

javascript html reactjs next.js seo

Skip over the em tags while extracting the content from the class name using the Parsel selector

Is there a way to extract the contents of a specific class name, including what's inside and after 'em' tags? Refer to the image below for context: https://i.sstatic.net/FrYVv.png My attempted methods and the corresponding outcomes are as f ...

html python-3.x selenium-webdriver parsel

Loop through a nested array and output the playerId, playerName, and playerCategory for each player

update 3: After thorough debugging, I finally found the solution and it has been provided below. let values = { "sportsEntitties": [{ "sportsEntityId": 30085585, "sportsEntityName": "490349903434903490", "sportsEntityStartDate": "7878 ...

javascript html arrays json reactjs

Issue with dynamically adjusting flex box width using JavaScript

Currently, I am developing a user interface that heavily relies on flexbox. The layout consists of a content area and a sidebar that can be toggled by adding or removing a specific class. Whenever the sidebar is toggled, the content area needs to be manua ...

javascript html css firefox flexbox

Can you place 4 table cells in the first row and 3 table cells in the second row?

Exploring the world of HTML and CSS designs for the first time. Here's a code snippet I've been working on: <html> <body> <table width="100%"> <tr> <td width="25%"> </td> ...

html

Issue encountered with the "find_element" function in Selenium using Python

Currently, I am working on a project that involves creating a bot to interact with a Google page (Google Meet) using the Selenium Webdriver in Python. However, when running the code find_element, I encounter the following error: selenium.common.exceptions. ...

python html selenium-webdriver google-meet

Show tooltip exclusively when the text being shown ends with "..."

Currently, I am dealing with a table that consists of 5 columns and over a thousand rows. I need help with implementing a specific feature in one column, which can then be replicated to the other columns if successful. Due to varying text lengths within th ...

css angular angularjs typescript tooltip

Proper handling of retrieving POST method data on the current page

I'm uncertain if I'm handling my "same page" forms effectively. My current method involves adding a hidden input named "action" with value='1' to the form. Then, at the start of the page, I check if $_POST["action"] has a value, and ...

php html web

The behavior of the CSS Position property is exhibiting unique characteristics when used in

I am encountering an issue where an image is displaying differently based on the position attribute in Firefox compared to Chrome and IE11. Take a look at the preview on . Notice how the bottom tip of "Fountain Valley" is incorrectly positioned in Firefox ...

html css image firefox position

When jQuery updates the content, the div content disappears temporarily

I am currently using jQuery to generate HTML by fetching data from a JSON file. Below is the code snippet where I create the HTML: $(document).ready(function () { $('#searchForm').submit(function () { var entry= $("#searchFo ...

javascript jquery html

Is there a way for lengthy texts to automatically flow across multiple columns?

Is it possible to achieve a similar functionality in web design as that found in Microsoft Word with multiple columns? Specifically, I am looking for the text to automatically transition from column 1 to column 2 once the first column is filled. I have se ...

html css

Implementing CSS styles on selected elements using jQuery

My current HTML layout looks like this.. <div class="container> <div class="panel"> <div> <div> <div> <img class="match" src="myimage.jpg"> &l ...

javascript jquery html css

Ensure that hyperlinks remain unbroken and do not split over two lines

When I generate links using $_GET [Array] to display in a box, I aim to have 5-10 links per line without any of them appearing on two lines. While I currently use {text-align:justify;} for consistent border spacing, I am seeking a method to prevent the lin ...

php css

CSSer Q&A