The CSS file is causing the footer to be cut off from the page and

My webpage is not scrolling properly when I add a lot of content, causing the footer to get cut off. I have tried various solutions found in other questions, but none have worked for me. Can anyone offer any suggestions or advice to fix this issue?

html {
    overflow: hidden;
    height: 99%;
}

body {
    background: #ffffff;
    height: 99%;
    margin: 0;
    padding: 0;
    line-height: 150%;
    text-align: center;
}

* {
    font-size: 8pt; 
    font-family: Tahoma, Verdana, sans-serif; 
    color: #000000;
    text-align: left;
}

/* === Containers === */

#mainContentArea {
    margin: 0 auto 0 auto; 
    display: table; 
    height: 100%;  
    position: relative; 
    overflow: hidden; 
    width: 600px;
}

.link,.linkActive {
    width:75px;
    margin-right:10px;
    float: left;
    margin-top:24px;
    text-align:center;
    font-family:Georgia, "Times New Roman", Times, serif;
    background-image:url(tab.gif);
    position:relative; bottom:0px;
}

.link:hover { background-image:url(tab2.gif); }

a { text-decoration:none; }

.link a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
}

#linkGroup {
    margin-right:10px;
    height:40px;
    width:600px;
}

#title {
    width:230px;
    height:40px;
    margin-right:20px;
    margin-top:15px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:20px;
    font-weight:bold;
    text-align:center;
    float:left;
}

.contentTitle {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#213E74;
    font-size:19px;
    margin-left:15px;
    margin-right:12px;
    margin-bottom:12px;
    width:573px;
}

.pageContent {
    font-family: Arial, Helvetica, sans-serif;
    color:#000000;
    font-size:12px;
    margin-left:20px;
    margin-right:20px;
    width:560px;
}


#blueBox {
    position: absolute;
    vertical-align: middle;
    background-color:#E7EDF8;
    width:600px;
    clear:both;
}

#header {
    width:600px;
    height:20px;
    background-color:#FFFFFF;
    background-image:url(header.gif);
    background-repeat:no-repeat;
}

#footer {
    width:600px;
    height:20px;
    background-color:#FFFFFF;
    background-image:url(footer.gif);
    background-repeat:no-repeat;
    text-align:center;
    padding-right:10px;
    color:#BDCDEC;
}

#footer a {
    font-size:9px;
    color:#BDCDEC;
}

#contentBox { margin-top:25px; }

html, body { text-align: center; }

p {text-align: left;}

Answer №1

Check out this example:

#mainContentArea {
    margin: 0 auto 0 auto; 
    display: table; 
    height: 100%;         # ensure the height matches the parent element
    position: relative; 
    overflow: hidden;     # conceal any overflowing content
    width: 600px;
}

By removing the overflow property or changing it to auto, you should be able to resolve the issue.

Answer №2

Using overflow hidden in your HTML will conceal the scroll bar.

What happens if you eliminate the following line?

html {
  overflow:hidden;

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

Tips for modifying navbar appearance as user scrolls?

I am currently working on a website using Bootstrap 4. The goal is to create a navbar with a transparent background that transitions to white smoothly when the user scrolls down. I want the navbar to return to its initial state when the user scrolls back u ...

Using javascript to locate and substitute a word divided among multiple tags - a step-by-step guide

I need to utilize JavaScript to locate and substitute a word that has been separated into multiple tags. For instance, consider the following HTML code: <html> <body> <div id="page-container"> This is an apple. ...

Looking for an xpath to target elements within a neighboring table

I am having trouble creating an xpath expression to find the text located in the span tag that contains text to locate in the second portion of the xpath. The text should be found by first locating an image inside a table row within a table data cell in a ...

Using PHP code in CSS for the background styling

I'm having trouble with this line of CSS... background-image:url(upload/<?php echo $array['image']; ?>); It's not working properly, and all I see is a blank screen. The image exists in the database and on the server in the corre ...

Is the button not aligned properly with the email input field?

<div class="subscribe__form--action--btn"> <form action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32545b5e5b5746545C5B5356477F54585850"> </a>" meth ...

Exploring the Power of JQuery with Hover Effects and SlideToggle

I was struggling to keep the navbar displaying without it continuously toggling when my pointer hovered over it. I just wanted it to stay visible until I moved my pointer away. <script> $(document).ready(function(){ $(".menu-trigger").hover(funct ...

Currently seeking assistance in replacing an existing Wordpress object with a new one

I'm looking to swap out the current slider image with a new slider. Whenever I try to replace it with the TOP 5 Games, they disappear or don't show up at all. <?php if( function_exists('cyclone_slider') ) cyclone_slider('24&ap ...

Achieving a sleek line effect with a gradient border

Is there a way to make the gradient border transition between two colors look like a straight line? Additionally, is it possible to have the line start in the bottom left corner instead of the middle of the right side of the button? The current CSS code I ...

Ensure that any relevant information is placed adjacent to a floated image

I am currently designing a responsive webpage featuring images of people's faces placed next to descriptive text. At smaller screen widths, everything looks perfect. However, as the page widens, the text for one person starts next to the image of the ...

Guide on utilizing regular expressions to match CSS selectors

Attempting to determine if the head section in jQuery contains the font-weight:bold property within CSS. That particular property may exist in 4 different variations: font-weight:bold font-weight: bold font-weight :bold font-weight : bold Is there a way ...

Issue with strange symbols appearing in Safari on Mac

Hey there! I have this website built with asp.net and I have a text-box for filling in quantities. Sometimes, I notice this strange icon that looks like a human appearing on the text box. It only seems to show up when using Mac Safari browser. Check out th ...

Could the Google Font "Exo 2" be causing the size issue with HTML Canvas 2DContext.font?

As I work on creating a canvas and adding text to it, I have encountered an issue with the font Exo 2. Every other font works perfectly except for this one. Exo 2 is a Google font, and my suspicion is that the number "2" at the end of the name might be ca ...

preventing the ball from landing inside the container (JavaScript)

I developed a straightforward website with the following functionality: Upon entering any text into the prompt and clicking okay, a ball will drop into the 1st box, namely the Past Thoughts box. Below is the code snippet: HTML <h1> Welcome t ...

Calculating the Vertical Size of a Component within Django Template Design

Within a div element with a fixed width, I have a p element with the following CSS properties: height:100px; overflow:hidden; I am looking to implement a functionality where a MORE button is displayed if the text within the paragraph overflows and is hid ...

The left menu icons transform upon mouseover interaction

Is there a way to dynamically change the image displayed in the left menu when hovering over it, similar to the example shown below? https://i.stack.imgur.com/HzGwR.png Currently, the image does not change on hover. We would like it to transition into a ...

Error: jwt_decode function has not been declared

I'm currently working on a project and I've hit a roadblock while trying to fetch profile information for the logged-in account using a token. Despite using the JWT-decoding library, I keep encountering the issue where jwt_decode is not defined. ...

Template for PHP website including code

I am working on integrating this code into my index.php page in order to streamline the process of creating separate pages for my website using only simple HTML files. For instance: Instead of repeating the same template code on multiple pages like index, ...

The origin of the image is specified within the HTML document

I recently encountered an issue while trying to include images in my HTML file. When I used a local file path like background-image: url('file:///C:/Users/faycel/Desktop/site%20guide/paris.jpg'), the image displayed correctly. However, when I tri ...

How can I align an image and text alongside another image using HTML and CSS?

Having some trouble positioning an Image and Text next to another Image. Check out an example here: I attempted using floats, but it doesn't seem to be working. Here is the code I have: .left {float: left;} .right{float: right;} <div class="left ...

Why isn't the HTML template opening in Outlook 7?

Does anyone know how to fix the code issue on Outlook 7? I've only included the header section of my code here, but please let me know if you need more information. I would appreciate any help with this problem. Thanks! ...