Issue with min-height not being recognized in Page Wrap

The code snippet provided is as follows:

html ,body {
    height: 100%;
    font-style: Helvetica;
}
.page_background, .page { margin: 0 auto; }
.page_background {
    width: 100%;
    min-height: 100%;
    background: -webkit-linear-gradient(#282828, #888888);
    background: -o-linear-gradient(#282828, #888888);
    background: -moz-linear-gradient(#282828, #888888);
    background: linear-gradient(#282828, #888888);
    position: absolute;
}
.page {
    background-color: #FFFFFF;
    width: 85%;
    min-height: 100%;
    bottom: 0;
    position: absolute;
    height: 100%;
    left: 7.5%;
}

        <div class="page_background">
            <div class="page">
            </div>
        </div>

The issue arises when the page exceeds the height of the screen, causing the background color not to be applied. Both min-height: 100%; and height: 100%; have been tested without success. What could be the mistake in the code?

htmlcss

Answer №1

To achieve a clean slate, simply reset the default browser styles by adjusting the margins, as shown below:

html ,body {
  height: 100%;
  font-style: Arial;
  margin :0;
}

https://jsfiddle.net/yahs89z1/2/

Answer №2

Previously Attempted Solution Try adjusting the height of both the html and body elements like so 

html, body {
    height:100%;
}

This should ensure that all content on the page stretches to the full height of the window.

New Solution I have removed the position absolute and made some changes. Check out the updated code https://jsfiddle.net/dt6p94p9/ Let me know if this meets your requirements

html ,body {
    height: 100%;
    font-style: Helvetica;
}
.page_background, .page { margin: 0 auto; }
.page_background {
    width: 100%;
    min-height: 100%;
    background: -webkit-linear-gradient(#282828, #888888); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#282828, #888888); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#282828, #888888); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#282828, #888888); /* Standard syntax */
    /* position: absolute; */
    height: 100%;
}
.page {
    background-color: #FFFFFF;
    width: 85%;
    min-height: 100%;
    bottom: 0;
    position: absolute;
    height: 100%;
    left: 7.5%;
}

Answer №3

To make it work properly, include the position:fixed property and eliminate any margins using margin:0

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 streamlining the use of hidden and visible div elements with concise code

I have been attempting to use the same code for multiple modules on this page, but none of the methods I've tried seem to be effective. I want to avoid endlessly duplicating existing code. document.addEventListener('DOMContentLoaded', fun ...

javascriptcsscss-animations

What could be causing my input to not activate my function?

I am having issues with my input buttons not triggering my functions. Can anyone provide some insight into this problem? <div id="windowBar"> <h3>Imagine you were a superhero...</h3> <input id="WindowClose" type="button" onclick=" ...

javascriptjqueryhtml

Exploring ways to validate the existence of a class in HTML table elements

If I want to verify if each element has a specific class when creating tables and clicking on the corresponding cells above them, This is what I have tried. However, it did not work as expected. How can I make this work correctly? What am I missing her ...

javascriptjqueryhtmlcss

Is there a way to reference a background-image using "<img src>" syntax?

Why won't the background image display? It only displays as an img src. How can I call the background-image correctly? <body> <div id="page" style="background- image:url(https://storage.blob.core.windows.net/name/image.png)"> ...

html

What is the best method for calculating income and expenses within a JavaScript expense tracker?

I'm facing an issue where I can't add the value of a checked radio button to an object in a different function. Even though there are no errors, nothing gets added. My project involves creating an expense tracker, and adding either income or exp ...

htmljavascript-objects

Can I insert JavaScript code in any location within an HTML file?

Typically, Javascript code is placed in the header section of HTML code. <head> <script type="text/javascript" language="javascript" src="core.js"></script> ... </head> However, I've tested putting Javascript code in the body ...

javascripthtml

Why doesn't setting the SVG viewBox to "0 0 100 100" scale my path to 100%?

My current dilemma involves an SVG path that is only displaying at 50% of its intended size. How can I adjust it to show at 100%? Below is the code snippet in question: <div className="svgPathContainer"> <svg width="100%" he ...

cssreactjssvgpathviewbox

How do I create more space in Vitepress to prevent the text from feeling cramped and allow it to display in a larger area?

Below is the content of my index.md file: --- # https://vitepress.dev/reference/default-theme-home-page layout: home hero: name: "TP2" text: "Analyzing the code of TP2 by Breno Mazzali Medeiros Tomazelli and Philippe Bouchard" ta ...

htmlcssvue.jsvitepress

Position the text to the left of a button positioned on the right side of the page

Is there a better way to align text to the left of a button, positioned on the right side of the page, regardless of text size? I'm currently using absolute positioning, but it doesn't seem like the most efficient solution. <nav class="someLi ...

htmlcss

Role in HTML/CSS

I'm currently facing an issue with getting my footer to stick to the bottom of the page. In Internet Explorer, it appears centered under the rest of the content instead of at the very bottom. When I try to view it in Chrome, it ends up positioned next ...

htmlcssbrowserpositioning

Issue with Flex display not being applied within Material UI Grid Item

I am attempting to position an element at the end of a Grid Item (horizontally). In order to achieve this, I am enclosing my component in the following div: Here is the complete code snippet: <Grid container spacing={8} alignItems={'stretch' ...

htmlcssreactjsflexboxmaterial-ui

Issues with image sizing on mobile devices

After finalizing my header design, I encountered an issue with the mobile version of the website. The images in the header are not responsive and do not adapt well to different screen sizes. I need assistance converting the header design into functional co ...

htmlcss

What is the best way to trigger a JavaScript function to execute as soon as the innerHtml has been modified via Ajax

Utilizing Ajax to dynamically update the content of a div upon clicking a link is my current project. I am seeking guidance on how to call a JavaScript function once the file has been retrieved from the server and the div's content has been replaced. ...

javascripthtmlajax

ways to clear the float on the right side of an image

So I have two images that I am trying to float, like this: img{ float:left; clear:right; } <img src='http://img1.imgtn.bdimg.com/it/u=1005212286,2432746147&fm=21&gp=0.jpg' alt=''><br> <img src ...

htmlcss

Data loaded by the load() function disappears following an ajax action

I need assistance with a sorting page I am creating that displays content from a database and allows users to sort it using listjs. The issue I am facing is that when I click on any button, the loaded content disappears. Strangely, manually adding content ...

phphtmlmysqlajaxload

Setting the height of children within an absolutely-positioned parent element

I am facing an issue with adjusting the size of children elements based on their parent. The scenario is as follows: HTML <div class="video"> <div class="spot"> <img src="..." alt=""> <button>x</button> </div ...

htmlcsscss-position

Having trouble using jQuery to target the element "(this)"?

Currently, I am delving into jQuery and have stumbled upon a section that perplexes me. Due to my lack of familiarity with the terminology, conducting an effective Google search has proven difficult. Therefore, I decided to craft this question to elucidate ...

jqueryhtmlcsshover

Unable to completely conceal the borders of Material UI Cards

Despite my efforts to blend the card with the background, I am still struggling with the tiny exposed corners. I've spent hours searching for a solution, but nothing seems to work. I've tried various methods such as adjusting the border radius in ...

javascriptcssmaterial-ui

Creating a webpage using webkit technology

As someone new to web development, I am eager to create a website that is user-friendly on both desktops and mobile devices. Recently, I stumbled upon a site with impeccable design and functionality using what appeared to be "screen webkit". I'm curi ...

javascripthtmlcss

Issue with Tooltipster plugin causing jQuery function not to trigger upon clicking the link within the tooltip

Recently, I've been experimenting with a jquery plugin called Tooltipster by inserting some HTML into the tip with an href link. The problem arises when I try to add a class to the href and fire a jquery function upon clicking it. No matter how much I ...

javascriptjqueryhtmlclicktooltipster