The footer covers the content when the content fills the entire screen

I'm having trouble getting my .content_pro to stick to the top of the footer, regardless of screen resolution. When I set the height to 100%, it ends up underneath the footer. I've been struggling with this for hours but can't seem to make it work. Here is my HTML & CSS:

HTML:

    <!--Begin Content-->     
<div id="content_pro">
    <div id="pro_menu">
        <div class="grey"><img class="pro_img" src="images/bannehof.jpg"><a href="subpages/bannehof.html" target="targetframe" class="pro_title">Bannehof</a><br /><br />Deuren c.a. 750</div>
        <div class="white"><img class="pro_img" src="images/casaconfetti.jpg"><a href="subpages/casaconfetti.html" target="targetframe" class="pro_title">Casa Confetti</a><br /><br />Deuren c.a. 850</div>
        <div class="grey"><img class="pro_img" src="images/citymax.jpg"><a href="subpages/citymax.html" target="targetframe" class="pro_title">Citymax</a><br /><br />Deuren c.a. 2200</div>
        <div class="white"><img class="pro_img" src="images/nielsborghplaats.jpg"><a href="subpages/nielsborghplaats.html" target="targetframe" class="pro_title">Niels Borghplaat</a><br /><br />Deuren c.a. 15</div>
        <div class="grey"><img class="pro_img" src="images/ronssehof.jpg"><a href="subpages/ronssehof.html" target="targetframe" class="pro_title">Ronssehof</a><br /><br />Deuren c.a. 2500</div>
        <div class="white"><img class="pro_img" src="images/rusthoeve.jpg"><a href="subpages/rusthoeve.html" target="targetframe" class="pro_title">Rusthoeve</a><br /><br />Deuren c.a. 255</div>
        <div class="grey"><img class="pro_img" src="images/westerbeek.jpg"><a href="subpages/westerbeek.html" target="targetframe" class="pro_title">Westerbeek</a><br /><br />Deuren c.a. 350</div>
    </div>
        <iframe class="pro_subpage" src="subpages/bannehof.html" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" ></iframe>
</div>
<//End Code>

CSS:

* {
    width:100%;
    margin:0 auto;
    padding: 0;
    font-family:arial;
    overflow-x: hidden;
    position: relative;
}

html, body {
    height: 100%;
}

    #content_pro {
    overflow: hidden;
    z-index: 9;
    height: 100%;
}

#pro_menu {
    height: 84%;
    width: 380px;
    position: absolute;
    float: left;
    overflow-y: scroll;
    margin: 80px 0px 25px 0px;
    overflow-x: hidden;
    z-index: 999;
}

footer, .push {
    width: 100%;
    background-color: #eb691e;
    height: 100px;
    z-index: 10;
    overflow: hidden;
}

Thank you!

htmlcssfooteroverlapoverlapping

Answer №1

Initially, you should consider removing the following section from your CSS file:

* {
    width:100%;
    margin:0 auto;
    padding: 0;
    font-family:arial;
    overflow-x: hidden;
    position: relative;
}

You may opt to retain only the essential rules as sometimes unnecessary ones can be avoided.

* {
    margin:0;
    padding:0;
}

Remember to specify the 'font-family' in the body tag like so:

body {
    font: Arial, Helvetica, sans-serif;
}

In relation to your query about fixing the footer at the bottom (assuming I've correctly understood your intention), here is an example:

HTML

<div id="wrapper">
    <div class="w1">sdfsdfsd</div>
</div>
<footer id="footer">ssdfsdfs</footer>

CSS

html, body {
    height: 100%;
    margin: 0;
}
#wrapper {
    min-height: 100%;
    width: 100%;
}
.w1 {padding-bottom:50px /*footer height*/;}
#footer {
    height: 50px;
    margin-top: -50px; /*equal to footer height */
    position: relative;
    width: 100%;
}

Answer №2

If I have interpreted your question correctly, then I believe something similar to this solution will suffice. I have simply included some padding.

Check out the fiddle here: http://jsfiddle.net/9cKTH/

* {
    width:100%;
    margin:0 auto;
    padding: 0;
    font-family:arial;
    overflow-x: hidden;
    position: relative;
}

html, body {
    height: 100%;
}

    #content_pro {
    overflow: hidden;
    z-index: 9;
    height: 100%;
    padding-bottom:50px;
}

#pro_menu {
    height: 84%;
    width: 380px;
    position: absolute;
    float: left;
    overflow-y: scroll;
    margin: 80px 0px 25px 0px;
    overflow-x: hidden;
    z-index: 999;
}

footer, .push {
    width: 100%;
    background-color: #eb691e;
    height: 100px;
    z-index: 10;
    overflow: hidden;
}

Does this meet your requirements?

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 uniform column width in a Material-UI Grid

Looking for a way to create a single column layout with items of equal width using the Material-UI Grid system? Check out this sample code: <Grid container align="center" direction="column"> <Grid item className={classes.item}> < ...

cssreactjsflexboxmaterial-ui

Implement a dialog on top of a current web page, achieve php-ajax query result, and enhance with

My website features 'dynamic' content, where 'static' nav-buttons replace specific div contents upon clicking. While I am able to retrieve my php/ajax results in a dialog box, I am struggling with placing this dialog above my current p ...

javascriptphphtmlajaxjquery-mobile

Leveraging a common element throughout various partial views

In my ASP.Net MVC 3 application, I have various controllers and actions that display pop-up dialog windows for user input. One important aspect of these dialogs is the faded mask that appears behind them. Each dialog window control resides in a separate P ...

htmlasp.net-mvc-3partial-views

Leveraging the Angular (2) routerLinkActive directive to handle dynamic routes

Although my current approach works, I believe there may be a more efficient way to implement this in Angular. The situation is as follows: Imagine nested, inflected paths like /logos and /logo/:id The markup below functions as intended: <li class ...

javascripthtmlangulartypescript

Issue with Bootstrap 4 navbar z-index not functioning as expected

Hello, I am struggling to place my navbar on top of an image using bootstrap 4. I have set the CSS properties for both elements, but it doesn't seem to be working. Here is the code I am using: <header> <nav class="navbar navbar-toggl ...

csstwitter-bootstrapnavbaroverlapbootstrap-4

Ways to ensure even spacing in a responsive header design

On my homepage, I have a large header image that is responsive in the mobile version. However, I am having trouble managing the spacing between the button and text below it. The spacing varies on different mobile screens and sometimes appears larger than i ...

cssmobileresponsive-designresponsive-images

Managing and authenticating HTML checkboxes using Spring MVC controller

Currently working with Spring MVC and designing a user registration page. I want to provide users with the choice to opt-in for email notifications and agree to Terms of Service before signing up. Due to using Thymeleaf as my templating engine, I am facing ...

javahtmlspring-mvcthymeleaf

Manipulate the label content of the last child using Javascript

On my BigCommerce website, I am trying to change the label text of a variable using a JavaScript function since the support team is unable to assist with this. Below is the code snippet that needs modification: <dd class="GiftCertificateThemeList" st ...

javascriptjqueryhtmlforms

The CSS styling in Internet Explorer 11 is causing cells to merge into the same column in a table

In my CSS-styled form that resembles a table, the two input elements are displaying on top of each other instead of side by side. How can I adjust them to appear next to each other? There is a possibility that this issue could be browser-specific. The for ...

htmlcssinternet-explorer

CSS for Centering Text and ImageAchieving the perfect alignment

I have a footer positioned at the bottom of my webpage containing some text along with a few PNG images. I am attempting to center everything within the footer. I tried using margin: 0 auto, but it didn't work due to the footer not being a block elem ...

htmlcsscentering

Does CSS have a selector that does not include any elements?

Considering the examples below <span id="foo_repeater_bar_0"></span> <span id="foo_repeater_batz_1"></span> I am looking for a CSS selector that will allow me to target only the elements whose id does not include foo_repeater. ...

htmlcsscss-selectors

Is there a way to select only a single line from an HTML document?

Is there a way to extract just one specific line from an HTML file? Let's say we have the following file: <!DOCTYPE html> <html> <head></head> <body> This is a test string. This is another test st ...

javascriptphphtml

Which library does stackoverflow utilize to showcase errors (utilizing Bootstrap popover for error help-block)?

Currently, I am using bootstrap's has-error and help-block classes to display validation error messages in my form. However, I find the error message display in Stackoverflow's Ask Questions Form to be very appealing. Are they using a specific js ...

javascripttwitter-bootstrapcss

What is the best way to retrieve all the listed TV and film ratings in descending order? Using Django

Our Goal I aim to organize movies based on their star ratings and filter out those with ratings lower than a specified threshold. 2. Retrieve the IDs of Movies and TV shows mentioned in the view, fetch the data and score through URLs one by one. 3. Presen ...

javascriptpythonhtmldjangodjango-views

What is the best way to implement individual fade-ins for each image in my project?

Regular Whenever I hover over one image, all images fade together. I'm not sure how to prevent this effect from occurring simultaneously. Any assistance would be greatly appreciated. Link to my stylesheet Link to my index page I have attempted to f ...

html

Plugin for creating a navigation bar with a jQuery and Outlook-inspired style

Our team is considering transitioning our asp.net forms application to MVC. Currently, we utilize outlook-style navigation with ASP controls such as listview and accordion, using code referenced here. Are there any jQuery/CSS controls available for MVC t ...

javascriptcssjquery-ui

Opting for PHP over JSON in a jQuery live search code

Is it possible to modify my jQuery Google Instant style search script to pull content from a PHP script instead of using the BingAPI? Below is the current code being used: $(document).ready(function(){ $("#search").keyup(function(){ var searc ...

phpjavascriptjqueryhtmljson

Explore registrations by year and month

I am currently working on coding where a record needs to be displayed based on the date (Month, Year), for instance: 12-2022. However, with the current code I have, I am unable to achieve this. Can anyone offer some guidance on what steps I should take? ...

phphtmlcsssqldate

Divs sliding out of alignment

I am experiencing an issue with the scrolling behavior of a wrapper div that contains two nested divs. Specifically, when I scroll the wrapper horizontally on Android devices, the header section and content section seem to be out of sync and there is a not ...

javascriptandroidcssscroll

What could be causing my buttons to not line up properly?

My buttons are refusing to line up horizontally for some unknown reason. I can't figure out what the issue is. They are all set to display as inline-block elements. The first image shows a website with the correctly aligned buttons, while the second o ...

htmlcss