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

Divide a single image into several smaller images and enable clickable links on each separate image, similar to an interactive image map

Challenge: I am faced with the task of splitting a large image (1920px x 1080px) into smaller 40px by 40px images to be displayed on a webpage. These smaller images should come together seamlessly to recreate the original full-size image, with 48 images a ...

cssvue.jsflexboxvuetify.js

Issue with Gmail failing to render CSS in HTML email (svnspam)

After successfully setting up and configuring svnspam, I noticed that the emails sent to my Gmail account are missing the colored diffs. When examining the original email using Gmail's view original feature, I found the CSS code as follows: <html ...

htmlcssemailgmail

Methods for passing JavaScript variables to PHP

I have encountered this problem on Stack Overflow before, but I couldn't find a solution that worked for me. I am using Codeigniter and have a form where users can rate a product. What I need to achieve is to insert the user's rating into the dat ...

javascriptphpjqueryhtmlcodeigniter

Transform HTML or formatted text from an iPhone 4 Notes backup SQLite file into plain text

I was looking to recover some missing notes from an iTunes backup of an iPhone 4 by accessing the notes.sqlite file. After querying the table that stores the note text: select zcontent from znotebody I found that the text is in HTML format. Is there a wa ...

iphonehtmlwebkitrestore

Issue with the selected toggle menu

Whenever I click on a menu item's main div, its color changes. If I click again, the color remains the same. But now, I want the toggle menu to change its color when clicked, and then revert back to the color of the other parent divs when clicked agai ...

jqueryhtml

Assigning websockets to a global variable may cause them to malfunction

I'm utilizing websockets in conjunction with JavaScript and HTML5. Here is the code snippet I am currently working with: <input type="text" onFocus="so = new Websocket('ws://localhost:1234');" onBlur="so.close();" onKeyUp="keyup();"> ...

javascripthtmlnode.jswebsocket

The background color in CSS frames the text with a unique hue

Is there a way to wrap my multi-line text inside a div with a background color that automatically adjusts its size based on the text length? .multiline{ padding:0px; white-space: pre-wrap; height: 100px; width: ; margein:0px } <div style="b ...

htmlcss

Tips for positioning a JQuery drop-down correctly

Although I am not well-versed in JQuery and struggle with CSS, I often find myself working with both. Currently, I have encountered a problem: The jquery script I am using involves clicking on an image to reveal a login box that drops down using slideTogg ...

jqueryhtmlcss

Is your data coming in as NaN?

I am currently developing a basic webpage that has the capability to calculate your stake and determine your return, reminiscent of a traditional betting shop. As of now, I have successfully hard coded the odds into my page. However, while testing my code ...

javascriptjqueryhtmljson

What is the default method for automatically disabling drop down fields?

I've created a script that will gray out a drop-down field if a prior selection wasn't made. Once the appropriate choice is selected, the grayed-out field will become active. My query is, how can I set the drop-down field to be initially grayed ...

javascriptjqueryhtmldrop-down-menu

What is the best way to open the index.html file in electron?

I'm currently developing a cross-platform app using electron and Angular. As of now, the code I have for loading my index.html file looks like this: exports.window = function window() { this.createWindow = (theBrowserWindow) => { // Create ...

javascripthtmlelectronload

Differences between PHP Filter and PHP htmlspecialchars compared to sqli prepare in PHP

I've been intrigued by the pros and cons of different methods for preventing SQL injection. The PHP filter checks if the input is in the correct format and returns true or false, which can then be sent to the server or not. Using the PHP htmlspecial ...

phphtmlsql

Submitting an ajax form with the use of the symbol '&'

I am currently working on a form submission using the .ajax() method. Within my script, I have the following code: data: dataString, The variable dataString is composed of: var list = $('.listsummary').val() The listsummary class is assoc ...

javascriptjqueryhtmlajax

Looking for the location of a matching brace in a dataset?

As a newbie in the world of coding, I have embarked on learning about NodeJs file system module. Currently, my focus is on handling a large data file stored as a string. The challenge that I am facing is with locating the matching close brace and its pos ...

javascripthtmlnode.jsangularjs

What are some ways to avoid the use of underline and slash symbols in material-ui/pickers?

Is there a way to remove the underline and slash characters that separate day, month, and year in the material ui pickers for version mui version 4? <KeyboardDatePicker margin="normal" id="date-picker-dialog" label="Dat ...

javascripthtmlreactjsdatepickermaterial-ui

Designing a layout for a chat application that is structured from the bottom up

I'm currently in the process of designing a web application for a chat platform. I have access to an API that provides a list of messages: chatsite.com/api/thread/1/messages/ [ { "id": 2, "sender": { "id": 2, ...

javascripthtmlcssvue.jsflexbox

Limit jQuery script to operate exclusively on a single page

Despite the abundance of answers to similar questions, my lack of JS skills hinders me from implementing them in my specific case. On my WordPress site, I have a script that changes the navigation bar's color when scrolling down to the #startchange CS ...

jquerycsswordpress

Jquery is failing to handle multiple inputs

I am currently working on a system that can handle multiple Yes/No questions. However, every time I try to submit the form, I encounter an error in the console that I cannot identify, and no data is returned from the query. Previously, I used an Array to s ...

javascriptjqueryhtmlajax

Tips on how to customize an HTML form submission appearance

Take a look at my file upload form below: <form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="filetoupload" id="filetoupload" onchange="this.form.submit();"> </form> I am trying to figure out ...

htmlcss

Prevented: Techniques for providing extra cushioning for a button, but with the condition that it contains an external icon

How can I apply padding to a button only if it contains an external icon? If the button has an external icon, I want to give it padding-right: 30px (example). However, if there is no external icon present, then the button should not have the 30px padding. ...

javascripthtmljquerycsscss-selectors