Flexible design for your website content wrapper

When I display the content on my website, it sometimes overlaps the footer because the wrapper does not adjust its size based on the content. I set the height to an absolute value and now I need to find a more flexible option to prevent this issue. I've been searching online for solutions but haven't found anything yet. How can I adjust the height of the wrapper so that all the text fits without overlapping the footer, without using an absolute value?

Here is a jsfiddle link showcasing the problem. The CSS code for the wrapper is as follows:

.wrapper {
    height: 500px;
    margin: 0 auto -142px; /* bottom margin equals negative value of footer height */
}
htmlcssresponsive-design

Answer №1

To ensure proper height adjustment, make sure to add height:auto !important to your wrapper class. Your updated wrapper class should look like this:

.wrapper {
    height: auto !important;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
    overflow:auto;
}

If possible, it's recommended to place the footer outside the wrapper for better results. This approach has proven effective in my experience.

You can view the changes on the updated fiddle provided below.

Updated Fiddle

Answer №2

If my understanding is correct, you are looking to place a div at the bottom of .wrapper, which we can name #push.

<style type="text/css>
.wrapper { margin: 0 auto -142px; }
#push { height: 142px; }
</style>
<div class="wrapper">
<!-- Insert content here -->
    <div id="push"></div>
</div>

By adding #push, the wrapper now extends by 142px, ensuring that the footer will cover #push instead of the actual content, preventing overlap.

Answer №3

Experiment with these new design modifications

.container {
    height: 600px;
    margin: 0 auto; 
    overflow:hidden;
}

VIEW DEMO

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

Unearthing the worth of the closest button that was clicked

I am currently working on a profile management feature where I need to add students to the teacher's database. To achieve this, I am using jQuery and AJAX. However, I am encountering an issue where clicking the "add" button for each student listed on ...

javascriptjqueryhtmlajax

Issue with Mobile Touch Screen Preventing Vertical Scrolling

Currently experiencing difficulties with a div element that is not allowing touch and vertical scroll on mobile devices. Although scrolling works fine with the mouse wheel or arrow keys, it does not respond to touch. Have tested this on various devices and ...

javascriptcssreactjssassstyled-components

JQuery animations not functioning as expected

I've been attempting to create a functionality where list items can scroll up and down upon clicking a link. Unfortunately, I haven't been able to achieve the desired outcome. UPDATE: Included a JSFiddle jQuery Code: $(document).ready(function ...

javascriptjquerycss

Utilize the <a> element as a button to submit the data form

I am looking to transfer data from a form to another PHP page without using a button within the form itself. Instead, I have placed a separate button outside of the form for submission. How can I achieve this by sending the form data to the other page? Bel ...

javascriptphpjqueryhtmlforms

Utilize ng-repeat to display a series of images, with the first image being placed within a unique div

My challenge lies in displaying product images using ng-repeat, where one image is located in a separate div. Let me share my code and explain what is happening. The API response provides product details and images [{"id_product":"1000","name":"Nikolaus ...

javascripthtmlangularjs

Configuration for secondary dependencies in Tailwind

As per the guidelines outlined in the official documentation, it is recommended to configure Tailwind to scan reusable components for class names when using them across multiple projects: If you’ve created your own set of components styled with Tailwin ...

javascriptcssnode.jstailwind-css

Challenges arising when transferring data from Django to HTML

I am trying to calculate the sum of elements in lista[] which consists of decimal numbers, but I keep getting this error message: lista[] is composed of decimal numbers ValueError at / argument must be a sequence of length 3 This is my code : views.py ...

htmldjangodjango-views

Echo command fails to work with location.href

I am facing a small issue with my PHP echo. I have a JavaScript link function that is not working because the HTML code shows this type of link onclick="location.href="http://www.link.com/";". It's clear that this syntax won't work. However, if w ...

javascriptphpjqueryhtml

Fixed position scrollable tabs with Material UI

I recently implemented material-ui scrollable tabs in my project, referencing the documentation at https://mui.com/material-ui/react-tabs/#scrollable-tabs. Here is a snippet of the code I used: <Tabs value={value} onChange={handleChange ...

javascriptcssreactjsmaterial-ui

Can anyone help me with displaying auto complete HTML files in VScode?

As a Korean, please excuse my lack of proficiency in English. This image displays the autocomplete feature for HTML files in IntelliJ. This particular file was generated by Spring Boot (start.spring.io). How can I achieve the same in VSCode? ...

htmlspringspring-bootvisual-studio-codeautocomplete

What is the best way to implement a JSON object within an <img> src attribute?

Currently, I am in the process of creating a dynamic Vuetify navigation drawer and I have the intention of storing images in a JSON array. My main inquiry revolves around figuring out if it's feasible to extract the image attribute and incorporate it ...

htmljsonvuetify.js

Troubleshooting issue with the spread operator and setState in React, Typescript, and Material-ui

I recently developed a custom Snackbar component in React with Material-ui and Typescript. While working on it, I encountered some confusion regarding the usage of spread operators and await functions. (Example available here: https://codesandbox.io/s/gift ...

javascripthtmlreactjstypescriptmaterial-ui

What is the best way to connect data so that when a user clicks on a specific card, it appears on a popup card

When a user clicks on any card containing data retrieved from a backend API GET method, that data should be displayed in a pop-up card. In my situation, I have two components: DisplayNotes.vue and UpdateNotes.vue. Whenever a user clicks on a displayed card ...

javascripthtmlcssvue.jssass

Styling Multiple Fullscreen Rows with Bootstrap CSS

Does anyone have any suggestions for the CSS code needed to stack five rows on top of each other? Each row should be 100% height and width of the browser. Here is the HTML code I currently have: <div id="wrapper"> <div class="container-fluid"> ...

htmlcsstwitter-bootstrap-3

Use the CSS property of display:none; on elements that have not been selected

There are multiple divisions on this page, and one of them has the class "active". I am looking to hide all the divisions except for the one with the "active" class. Can you provide me with the appropriate CSS selector for achieving this? ...

csscss-selectors

The content in the flex box item with horizontal scroll is overflowing beyond its boundaries

I am working with a flex box container that contains two child elements: a left side and a right side. I want the right side item to have a horizontal scrollbar in order to fit its content. .container { display: flex; overflow: hidden; height: 300 ...

htmlcssflexbox

User agreement required for HTML5 geolocation custom notifications

Currently implementing HTML5 geolocation on my mobile website. I am exploring the possibility of displaying a custom notification instead of the default web browser notification to request user consent for sharing their location. This custom notification ...

htmlgeolocation

Encountering a problem with the persistent JavaScript script

I have implemented a plugin/code from on my website: Upon visiting my website and scrolling down, you will notice that the right hand sidebar also scrolls seamlessly. However, when at the top of the screen, clicking on any links becomes impossible unless ...

javascripthtmlcss

What is the best way to resize an element such as an image?

When an image is resized using a percentage, it preserves its aspect ratio properly. I am looking for a way to replicate this behavior with a div. My current challenge involves precisely positioning an element relative to an image. The image fills 100% of ...

javascriptjqueryhtmlcsssass

Attempting to personalize the CSS for a tab within a table in Material design is unsuccessful

Within my Angular 5 application, I have implemented the Material API. One of the components in my project is a table with 2 tabs structured like this: <mat-tab-group> <mat-tab> <mat-table> <!-- content --> </mat- ...

cssangularangular-materialangular5