The background doesn't quite make it to the bottom of the page

I am experiencing an issue with the white container on top of the yellow background in my design. Despite setting the min-height to 100%, it stops and does not extend properly. Here is the CSS code for this container, and below you can see an image illustrating the problem when scrolling to the bottom:

 
.home-body {
    background-color: #EAC117;
    height: 100%;

.home-main-content {
    width: 800px;
    min-height: 100%;
    position: absolute;
    overflow: hidden;
    margin-left: 56.5%;
    left: -500px;
    top: 51px;
    border-left: 1px solid black;
    border-right: 1px solid black;
    background-color: #fff;
    background-repeat: repeat-y;

.home-post-echoed-container {
    width: 400px;
    position: absolute;
    margin-left: 50%;
    left: -200px;
    top: 200px;
    overflow: hidden;
}

.home-echoed-posts {
    width: 600px;
    overflow: hidden;
    left: -98px;
    position: relative;
    background-color: #fff;
    margin-bottom: -5px;
    border-top: 1px solid;color:#0a527e;
    border-left: 1px solid;color:#0a527e;
    border-right: 1px solid;color:#0a527e;
}

.home-echoed-posts-post {
    margin: 10px;
    color: black;
}

.home-echoed-posts-email {
    margin: 10px;
    color: black;
}

.home-echoed-posts-date {
    margin: 10px;
    color: black;
}

css

Answer №1

You seem to be making a mistake.

If you want to center something, try using the following CSS instead of absolute positioning:

.foobar{
   margin: 0 auto;
   width: 800px;
}

As for why comments are not expanding the container, it's difficult to determine without seeing your code. It could be related to either positioning or floats. Without more information, I can't offer a specific solution. However, if floats are causing the issue, consider adding the following CSS to the container:

.container{
   overflow: hidden;
}

Although it may seem counter-intuitive, this trick works effectively. You can find more details about it here.

Additionally, make sure to read this article for further insights.

Update 2:

It appears that the situation is quite challenging as you seem to rely heavily on positioning. Consider learning how to use floats properly.

.home-post-echoed-container {
    width: 600px;
    margin: 0 auto;
    padding-top: 200px; // assuming top:200px was intended
    overflow:hidden;
}
.home-echoed-posts {
    width:600px;
    float: left;
    background: #fff;
    margin-bottom: -5px;
    border: 1px solid #0a527e;
    border-bottom: 0;
}

This snippet might help address the issue, although it's just an educated guess at this point.

Answer №2

body, html 
{
    height:100%;
}

Remember to add this rule at the beginning of your CSS stylesheet. Otherwise, applying min-height:100%; to .home-main-content may not have the desired effect. This is because in CSS, if a value like 100% is not explicitly defined elsewhere, it will default to the height of the current element.

Additionally, make sure that you set the same property if there are surrounding div elements enclosing your .home-main-content.

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

Adjusting Flexslider to perfectly accommodate the height and width of the window dimensions

Currently, I am using Flexslider version 1.8 and seeking to set up a fullscreen image slider on my homepage. My goal is to adjust the slider to match the browser window size. While experimenting with width:100% and height:auto properties, I have managed t ...

javascripthtmlcssflexslider

Utilize jQuery to apply inline styles to dynamically created div elements

I am attempting to apply inline styles to a div using jQuery. The current state of the div, as seen in Firebug, is shown below: https://i.sstatic.net/rqhIc.jpg My goal is to retain the existing CSS while adding margin-left:0 and margin-right:0 to the cur ...

javascriptjqueryhtmlcsswordpress

Tips on eliminating the bottom border of the final div within a group using CSS

Is there a way to remove the bottom border of the last "footer_column" div? See below for the HTML: <div id="footer_wrapper"> <!-- footer_wrapper starts here --> <div id="footer"> <!-- footer starts here --> <div class=" ...

htmlcss

Adjusting element placement on collapsed navbar using Bootstrap

I've been developing a navbar for a webpage and have successfully aligned the data left and right with the Brand in the center. However, when the navbar collapses, the alignment shifts to Left (over) Brand (over) Right. I want the Brand to remain at t ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

What is the process for implementing a CSS theme switch in a CHM file and ensuring that it remains persistent?

Welcome to my tech world Greetings! I am a tech writer with a side interest in scripting JavaScript/jQuery for our help file (CHM file). While I consider myself a beginner in JS scripting, I have ventured into the realm of dynamic theme swapping within CH ...

javascriptcsscookiesthemeschm

What is the process for retrieving the width value from an input field using jQuery?

This example demonstrates an alert trigger when the input value width or cursor crosses the input width. How can we retrieve the width of the input value without just getting the length of the value in jQuery? $('.value_width').text($('.i ...

javascriptjqueryhtmlcss

Leveraging bootstrap for achieving vertical and horizontal centering of images

My webpage uses bootstrap to display content, and while I've managed to center my images vertically, I'm facing an issue with horizontal centering. I want to ensure that any image, regardless of size, remains within the column/row and adjusts it ...

htmlcssbootstrap-4

a unique approach for creating an elastic multicolumn design with full scroll height background color, free from any pre-scripted solutions

The challenge of dealing with a common CSS issue has led me on a search for a suitable solution. Despite finding numerous partial fixes, none have met my exact requirements. Previously, I relied on a JavaScript workaround to address the problem. However, ...

cssmultiple-columns

How can one import files from an external CSS template in CakePHP 2.x?

I recently acquired an external HTML template that I purchased from a website called themeforest: https://i.sstatic.net/UIu6g.png The folder structure is as follows: base/ - css/ - fonts/ - images/ - img/ - js/ - index.html The template file Index.html ...

htmlcsstemplatescakephp

How can I make Firefox render the padding in a textarea the identical way as in a div?

In my efforts to ensure a consistent line width inside a textarea across IE8, Firefox, and Safari, I have encountered an issue where Firefox seems to add an extra pixel of padding compared to the other browsers. This results in text wrapping differently an ...

cssfirefoxtextareapadding

Assistance in configuring Zurb Foundation 5 for optimal integration with Laravel

As a relatively new user to Laravel with previous experience using older versions of Foundation, I am currently in the process of setting up a new Laravel project. My goal is to integrate the Foundation framework into my project, but I find myself a bit co ...

javascriptphphtmlcsslaravel

What are the disadvantages of not incorporating the main CSS file directly into the web page?

Optimizing the loading time of my webpages is a priority for me, especially when it comes to first-time loading and from cache. Despite that, I still prefer to have the browser re-validate all resources to avoid any strange displays or update issues caused ...

htmlcsshttpcachingwebserver

The wells are surpassing the line

I'm attempting to arrange 3 Wells horizontally in one row, as shown below <div class="row" style="margin-top: 10px"> <div class="span4 well"> <h3 class="centralizado"><img src="/assets/temple.png" /> & ...

csstwitter-bootstraptwitter-bootstrap-rails

Navigating through tabs on a mobile device by scrolling sideways

Is there a way to create a dropdown menu with tabs in a bootstrap site where the icons extend beyond the width of the menu, allowing mobile users to swipe horizontally? Check out the code here: https://jsfiddle.net/6yw6rp02/1/ This is the current code s ...

javascriptjquerycsstwitter-bootstrapowl-carousel

Utilizing Z-Index on DropDownTree has no impact on its display

Whenever the DropDownTree is placed near other expanding controls such as standard date pickers, it causes those controls to appear behind the DropDownTree. I have attempted various solutions including using inline style, setting z-index for .RadDropDownTr ...

cssasp.nettelerikcss-positionz-index

Is there a way to export a React component with embedded CSS styles as a self-contained snippet?

Is it possible to export a section from my Gatsby site as a standalone HTML component with CSS styles (using styled-components) for easy insertion into a blog as a snippet? Or do I need to resort to the tedious process of manually copying all the compiled ...

htmlcssreactjsgatsbystyled-components

Having difficulty creating a simple HTML menu, where one button is visible but the other is unresponsive despite having identical CSS styling

Looking to enhance my HTML skills as a beginner, I've begun building a simple website and am currently focusing on the menu. I created a "home" button (which is visually there but not functional), and then attempted to create another button next to it ...

htmlcss

How can I utilize a PHP variable as the height and width parameters in a CSS style?

After spending a considerable amount of time on this project, I am still struggling to make it work. Can someone please guide me on how to correctly assign the width and height values to the img element using variables? for ($x = 1; $x <= $aantal; $x+ ...

phpcss

Retrieve the initial link value in jQuery and make changes to it

Is there a way in jQuery to append to the current value of an attribute without storing it in a variable first? For example: $(document).ready(function() { $("#btn").click(function() { // get the link currently var linkCurrent = $("#link").att ...

javascriptjqueryhtmlcss

Tips for aligning an element at the center based on the viewport rather than the parent element

I'm trying to center an element within a header with five elements, consisting of a button on the left, a logo in the middle, and three buttons on the right. I want the logo to be centered based on the viewport. I've created a codepen to demonstr ...

csspositioningdisplay