Ensure that the height of the div element is equal to 100% of

I've been trying to figure out how to make my div take up all of the vertical height of the screen, but I haven't found a simple solution in the 100% div height discussions. Can anyone help?

Here's my code:

CSS

#mother {
    width: 100%;  
    margin: 0 auto; 
    z-index: 1;
}
#stripe_wrap {
    width: 1053px;
    min-height: 500px;
    margin: 0 auto;
    background: lime; 
}
#stripe1 {
    width: 39px;
    min-height: 500px;
    margin: 0px 0px 0px 0px;
    background: #000;
    float: left;
}
#stripe2 {
    width: 39px;
    min-height: 500px;
    margin: 0px 0px 0px 0px; 
    background:#000;
    float: right;
}

HTML

<div id="mother" style="overflow-x: hidden;">
    <div id="stripe_wrap">

        <div id="stripe1"></div>
        <div id="stripe2"></div>

    </div>
</div>

Answer №1

To ensure that the content is fully displayed, it's important to set the height of the <body> tag to 100%. This will prevent any vertical truncation.

Additionally, be sure to set the margin of the <body> tag to 0px. Failure to do so may lead to the total height being calculated as 100% of the visible area plus the margin, resulting in the appearance of a vertical scroll bar.

Answer №3

Ensure to specify height:100% for both your <body> and <html> elements.
If this div is the only content on your page, without these declarations, a 100% height will result in 0px.

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

Can the @keyframes in CSS3 be modified?

Exploring CSS3 animations has been a fun project for me, and I want to push the boundaries of what is possible. Currently, I have an infinite animation cycle that is working perfectly. However, I'm curious if it's possible to dynamically change ...

Sorting of tables does not function properly following an ajax request

I built a table that utilizes an AJAX response triggered by selecting a date from a drop-down menu. <!--datepicker--> <div class="col-md-4"> <input type="text" name="date_po_month_picker" id="date_po_month_picker" class ...

javascript guide to dynamically update the glyphicon based on value changes

I am attempting to implement an optimal level feature where a glyphicon arrow-up will be displayed if a value falls within the optimum range, and it will switch to a glyphicon arrow-down if the value is lower. <div class="card-body" ng-repeat="item i ...

Automatically pre-fill and send hidden form

I'm working on a form and have set up a handler for the submit button like this: $( '#submit_btn' ).click( function( data ){ theForm = document.getElementById( 'realForm' ); theForm.meetingName.value = document.getElement ...

The color of the link remains blue when using Firefox

Check out my website at kenastonchiropractic.com When viewing the site in Chrome, the "Home" link remains the same color as the other links and they all turn white when hovered over. However, in Firefox, the "Home" link stays blue even after being clicked ...

The appearance of the drop-down menu in IE is not the same as in other

I have implemented css bootstrap 3.2.0 on my website. However, I have noticed some discrepancies when viewing the site in Internet Explorer. The menu options have a thick black border and the dropdown menu button appears different compared to other browse ...

Is it possible to have the cursor rotate or animate by 45 degrees when clicked

Do you know how to create a unique custom cursor using CSS? Say, for example, we have this code: cursor: url(images/cursor.png) 15 15, auto; Now, what if we wanted to take it up a notch and make the cursor rotate -45 degrees when clicked, and then revert ...

PHP - designate a separate folder for script and style resources

There seems to have been some discussion about this issue before, but I am struggling to find a solution. I want to add css, js, and asset files to my php framework. However, when calling these files, the path must always match the folder structure like t ...

Boost the scrolling velocity of my sidebar using Jquery

Hello there, I am completely new to the world of web development and particularly to using JavaScript and jQuery. I am interested in learning how to adjust the speed at which my Sidebar scrolls down as the user navigates through the page. Here is the jQue ...

How can I remove the color of a button in jquery after it's been clicked?

<button style="background-color:lightblue" id="extractv"> <b> Extract<br>v </b> </button> ... $("#extractv").click(function () { $("#extractv").removeAttr("style"); }); Upon clicking the button, my ...

Ways to contrast HTML without considering whitespace?

I'm currently testing an HTML builder through unit testing. My goal is to confirm that the output content matches the expected content, while allowing for some leniency when it comes to white space. More specifically, I am not concerned with whether ...

Guide to deactivating a control within a User Control

I anticipated that making this change would be straightforward, but I am encountering some difficulties. Initially, my asp.net markup for the server control appears like this: <ucTextArea:UserControlTextArea ID="taRemarks" runat="server" /> However ...

Guide to verifying a field's value in a database

My web application requires three inputs from the user: UserName, FirstName, and Email. The goal is to verify if the entered username exists in the database and if so, validate the corresponding Firstname and email. If all three values are correct, a succ ...

What is the best way to ensure that a child element remains fixed in place?

What's the best way to make a left side panel (grandchild) sticky in relation to the body, while allowing a navbar and main content to be scrollable? <div> <div>navbar (should scroll away)</div> <div> <div>side pa ...

Is it feasible for nested div to remain unaffected by bleeding when the container is positioned relatively and has an overflow hidden

Is it possible to bleed a nested div even when the container is positioned relative with hidden overflow? In this case, giving the nested div a fixed position is not an option. Please check out this unique example: http://jsfiddle.net/s7nhw/11/. If you ...

What is the best way to align a div with a td within a table?

I have a table and I inserted a div inside it, but now the alignment with the td is off. I applied display: inline-block to both the td and div elements, but the td only shifted slightly. How can I correct this? Here's my HTML code for the table : ...

"Showing Off Your Steam Inventory on Your Website: A Step-by-

My goal is to display a user's specific inventory on a webpage. I've tried using the following link: but it hasn't been helpful. ...

Determine the hue of the scrollbar

My web page features a customized vertical scrollbar within a div box, and I have managed to create a horizontal scrollbar using CSS and jQuery. Now, I am looking for a way to match the color of the custom horizontal scrollbar with the rest of my design. ...

The @Input decorator in Angular 2/4 is designed to only transfer fundamental values and not collections or complex data

I have encountered an issue while attempting to use @Input with a list of objects, where the @Input variable ends up being undefined. What is functioning properly can be seen in home.component.html: <p> <it-easy [mycount]="countItem" (result ...

How come the nth-child selector remains unaffected by other selectors?

Here is an example that I have created for this issue: http://jsfiddle.net/SXEty/ <style> table td, th { padding: 8px; text-align: left; } table td:nth-child(1) { color: red; } table td { color: blue } </style> ... <table> <tr> ...