Background not covering full height despite setting HTML and body heights to 100%

I've been struggling to set my wrapper to 100% height, despite setting the height to 100%. Any solutions?

At the moment, my main_wrapper is empty and should have a background color of red.

While I'm looking to add a footer using position: fixed, any recommendations for learning more about this topic?

<html>
<head runat="server>

</head>
<body class="body">
    <form id="form1" runat="server">
        <div id="main_wrapper">


        </div>

        <div class="clear"></div>

    </form>

</body>
</html>



* {
    margin: 0; padding: 0;
    border: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Safari */
}

.clear {
    clear: both;
}

html {
    margin: 0;
    width: 100%;
    height: 100%;
   /* min-width: 640px; min-height: 480px;*/
}

body {
    margin: 0; /*Top and Bottom 0, Left and Right auto */
    width: 100%;
    height: 100%;
}

    .body #main_wrapper {
        margin: 0;
        width: 100%;
        height: 100%;
        backgroud: #f00;
}

Answer №1

    #form1 #main_wrapper {
            padding: 15px;
            width: 100%;
            height: 100%;
            background:#00f;
            min-width: 800px; 
            min-height: 600px;
}

Answer №2

It appears there may be a small mistake:

 .content #wrapper {
    padding: 0;
    width: 100%;
    height: 100%;
    background: #f00; } <<-- error

Answer №3

Everything looks good in your code.

You have correctly set the height and width of your divs, but don't forget that your div is nested inside a form element, which also needs its dimensions specified.

Simply add this to your CSS:

#form1{ width: 100%; height: 100%; }

This adjustment will ensure everything works as intended.

EXAMPLE

Answer №4

Hey there! Make sure to take a look at this link for some valuable insights.

#main_wrapper {
    position:absolute;
    margin: 0;
    width: 100%;
    height: 90%;
    background: #f00;
}
#footer {
    position:absolute;
    top:90%;
    height: 10%;
    width: 100%;
    background: blue;
}

My explanation covers the essence of the situation. To manage the size of a div using percentages, you must specify its position as absolute. The clear attribute is effective only with floated divs. In my demonstration, I have a primary div that is 90% tall and a footer div that is 10% tall. With an opacity less than one, entires can be seen obstructed by the clear element. However, upon removing the opacity line, the 'clear' disappears behind the main red div.

Hence, the pressing question arises - why utilize the clear function at all? Without knowing the full extent of your project, it's challenging to provide a definitive answer. Does this example shed more light on the matter?

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

Jumping Sticky Table Headers

Looking for a solution to prevent the table header from moving when scrolling through the data: tbody { overflow-y: scroll; } thead, tbody tr { display: table; width: 100%; table-layout: fixed; text-align: left; } thead, th { position: sti ...

Creating a clickable color-changing grid: A step-by-step guide

In a grid of size 12 by 12, each corner will be clickable, selecting a 6x3 cell area starting from the corner. The selected cells will change color upon clicking any of the 4 corners. After selecting one corner, the remaining cells (126 cells) will be che ...

Is there a way to ensure that the Bootstrap toggle starts off in a collapsed state?

I need assistance with creating a toggle feature where clicking on a line of text will reveal more text below, and when clicked again, the extra text collapses. I want the text color to change to blue when collapsed and red when expanded. The only issue is ...

Creating a CSS animation to mimic the fading in and out effect of the Mac scrollbar when scrolling begins

My journey begins with this: *::-webkit-scrollbar { } *::-webkit-scrollbar-button { } *::-webkit-scrollbar-track { } *::-webkit-scrollbar-track-piece { } *::-webkit-scrollbar-thumb:active { width: 6px; background-color: red; } *::-webkit-scr ...

Provide a unique <li> attribute for the JavaScript function to utilize

Is there a way to pass specific attributes from dropdown options to a javascript function? I have tried using .data() and .attr(), but the console keeps showing "undefined". Any suggestions on how to achieve this in a cleaner and simpler way would be gre ...

The viewport width in NextJS does not extend across the entire screen on mobile devices

I'm currently tackling a challenge with my NextJS Website project. It's the first time this issue has arisen for me. Typically, I set the body width to 100% or 100vw and everything works smoothly. However, upon switching to a mobile device, I not ...

Ensure that all form data is cleared upon the user clicking the back button

Is there a way to automatically clear the contact form data when a user navigates back in their browser? This would help prevent spammers from submitting the form multiple times by constantly clicking back and resubmitting. ...

What is the best way to create a scrollable nested div?

Link to Image My goal is to keep the red section fixed while allowing only the blue section to scroll when there is overflow. The red section consists of two divs. I have attempted using position: fixed to achieve this, but encountered issues such as ove ...

What is the best way to incorporate background colors into menu items?

<div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-12 fl logo"> <a href="#"><img src="images/main-logo.png" alt="logo" /> </a> ...

Use selenium to locate an element based on its CSS selector

Looking to extract user information from each block using the following code snippet: driver.get("https://www.facebook.com/public/karim-pathan") wait = WebDriverWait(driver, 10) li_link = [] for s in driver.find_elements_by_class_name('clear ...

Unable to separate the site logo (brand) and navigation links in Bootstrap 5 navbar

Trying to design a responsive navbar with Bootstrap 5, but facing an issue. Want the logo on the left and nav-links on the right, yet 'navbar-expand-lg' aligns both on the left side. I tried using the 'ml-auto' class in the ul tag, but ...

The integration of <form> with jQuery Ajax error

I have come across this HTML form function FormSubmit (){ $.ajax({ url:'dotar.php', type:'post', data:$('form').serialize(), success:function(){ setTi ...

Adjust the width of content within a wrapper using HTML and CSS to automatically resize

I am facing an issue with a content div that has variable length content arranged horizontally. I want the width of this content div to adjust automatically based on the length of its content. Removing the arbitrary "20%" value from the width property is c ...

"Using jQuery to target parent element of a checkbox and apply

Looking to modify the background color of a label based on whether the checkbox inside is checked or unchecked. Please note: Currently, the label's background changes on the first click, but it does not revert back when unchecking the box. <div c ...

display data labels within the chart - utilizing the power of angular.js in conjunction with chart.js

My goal is to display the chart's information without requiring the user to hover over any part of the chart. I am utilizing Chart.js with Angular.js I have the same question as this one posted here: question here! html code: <div class="wrapper ...

code, scripting - modal pop-up

My script currently has a popup window using window.open, but most browsers block this type of popups. I now want to change it to another popup that includes a php script, similar to what I've seen on other sites. It seems like they are using ajax. Ca ...

"What is the best way to use JavaScript to dynamically modify the hover color of a button

I am looking to customize the hover color of all buttons on my website to align with the overall theme. The challenge is that I need the hover color to vary based on the page it originates from. I have successfully identified the referring page, but I am s ...

Using Bootstrap 3 with ResponsiveSlides.js

I've been struggling to center the ResponsiveSlides slider within a bootstrap column. Despite resizing my large images to 80% in the CSS, they still refuse to align properly since they're no longer fitting the entire screen at 100%. Can someone l ...

Issues with the OnChange function not properly functioning in duplicate input fields

I've designed a form that allows for adding or deleting rows, effectively cloning input fields. One of the input fields utilizes Jquery Ajax to retrieve its value. However, upon adding an extra row by cloning the parent row to generate a child row, th ...

What is the best way to combine two pieces of information from a constantly changing table?

Could really use some help with jQuery! I'm trying to calculate the cumulative value from columns A and B, then add those values together. Check out this image for the expected output. <script src="http://code.jquery.com/jquery-1.11.2.min.js"> ...