Trouble with CSS and jQuery: Is document.height accurately reported? Why won't the div stretch vertically?

Surprisingly, I haven't been able to find anyone else facing this issue. O_o

Check out the code on Pastebin here

The code is causing a gap between the end of #main and the end of the actual page on IE, Chrome, and Safari, but not on Firefox.

The basic CSS includes 

html, body{ min-height: 100%; height: auto !important; }
. The element #content has the property position: relative within #main.

I'm trying to make #main stretch from the top to the bottom of the page.

Edit: On further investigation, it seems like the problem lies in ensuring that all content within #content loads before the CSS calculations are done. Changing pages triggers Chrome and Safari to properly set the height for #main. Is there a way to instruct the code to wait for all content to load? Though I'm uncertain if this will solve the issue with IE.

jquerycsshtml

Answer №1

<html>
    <body>
        <div id="main">
            <div id="content">
                <p>this is the content area</p>
            </div>
        </div>
    </body>
</html>

Also, include this CSS code 

html, body {height: 100%; margin: 0; padding: 0}
#main {
    min-height: 100%;
    height: auto !important;
    width: 1024px;
    position: absolute;
    top:0; 
    left:50%;
    margin-left:-512px
}
#content {margin: 135px 0 0 300px}

/* purely for demonstration */
#main {background-color: #CDE}

View the fiddle here
http://jsfiddle.net/UB975/6/

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

Is there an issue with the appearance of this HTML code?

Check out this HTML code snippet <div class="row"> <div class="col-lg-6"> <p>I enjoy blending my artistic background with web development and design. In my free time, I like to play sports and board games.</p> < ...

htmlbootstrap-4

When trying to insert glyphicons into a textarea, the result is displaying the actual text instead

When the glyphicon is clicked, I want the entered content to be added dynamically to the textarea. $(document).ready(function(){ //Click Event of glyphicon class $(document).on('click','.glyphicon',function(){ ...

javascriptjqueryhtmlbootstrap-4glyphicons

Experiencing difficulty inputting data into database using PDO

Attempting to save user input data to a database using PDO, I have created a form for users to input their information. However, when I submit the form, it redirects to proses_input.php and displays a blank page. I tried combining the code into one file, b ...

phphtmlpdo

When utilizing ng-content alongside *ngtemplateOutlet, the content does not appear visible within the DOM

I'm working with three Angular components - a base component and two child components (child1 and child2). The structures are as follows: child1.component.html <ng-template #child1Template> <div> <h1>CHILD 1</h1> ...

htmlangularparent-childng-contentngtemplateoutlet

Troubleshooting the Inline-Block Problem with Jquery Image Bubble Display

Recently, I've been exploring ways to eliminate the padding that is creating space between images before they align correctly. The culprit causing the padding seems to be the display: inline-block property. While it was suggested to have all the li t ...

css

How come my jQuery isn't updating the class of a specific element?

I apologize if this question seems too specific to my own project, but I am facing a dilemma. I am attempting to change the color of the title of the user's current page to orange when hovering over the page name in the navigation menu. In simpler ter ...

jqueryhtmlcssmouseoveraddclass

Dynamically size and position elements to fit perfectly within the container

I am currently facing a challenge with my absolutely positioned elements that have different position.top and height values generated from the database. The main goal is to resolve collisions between these elements by shifting them to the right while adju ...

javascriptjquerycssjquery-collision

Troubleshooting: Problems with importing jQuery in ASP .NET WebForms causing

The scenario: 1. https://i.sstatic.net/V1r1L.jpg The Directory Structure is as follows 2. https://i.sstatic.net/pNtqW.jpg This is how I attempt to load the jQuery. I have experimented with: <%= this.ResolveClientUrl("~/Scripts/jquery-version.min ...

c#jqueryasp.net

CSS Table Style Chaos

When styling a table using CSS, I encountered this line within the code: .pricing tr td:last-child { text-align: right; } This particular line ensures that the text in the last column of the table aligns to the right. The class "pricing" is applied to th ...

htmlcsscss-tables

Animating toasts in Bootstrap

Exploring the options available at https://getbootstrap.com/docs/4.3/components/toasts/ To customize your toasts, you can pass options via data attributes or JavaScript. Simply append the option name to data- when using data attributes. If you're lo ...

javascripthtmltwitter-bootstrap

Failure to load a picture does not trigger onError in the onLoad function

Is there a way to ensure that an image always loads, even if the initial load fails? I have tried using the following code snippet: <img class="small" src="VTVFile4.jpg" onload="this.onload=null; this.src='VTVFile4.jpg?' + new Date();" alt=" ...

javascriptjqueryhtml

Tips on modifying classes within specific sections of HTML tables

I attempted to create calendar-like tables, In my script, I am trying to handle events being registered. My goal is to change the classes of cells from 2 to 5 when they are clicked on, and change the cell colors from first to hovered to aqua. For this p ...

javascriptjqueryhtmlcss

Connecting the mousedown and mouseup events for a selector and the whole document

I'm attempting to achieve the following: $(document).on('mousedown', '.selector', function(){ $(document).on('mouseup', function(){ // perform some actions }); }); This code aims to trigger some actions a ...

javascriptjquerymouseevent

Making AJAX requests repeatedly within a loop

My current challenge involves implementing multiple ajax requests within a loop to populate several dropdown lists. Running the requests sequentially has resulted in only the last item in the loop being populated with values. var targetcontrols = []; ...

javascriptjqueryajax

What is the best way to incorporate three distinct conditional border colors?

I am trying to customize an icon button by having three different border colors - one for the regular state, one for when hovering, and another for when the icon is clicked. Currently, I am working with React and have a function that checks if the curren ...

htmlcssreactjsmaterial-ui

Combining the jquery-UI slider functionality with the canvas rotate() method

Is there a way to rotate an image using html2canvas plugin and jQuery UI slider? I am new to programming and need some guidance on how to achieve this feature. Here is my current progress: http://jsfiddle.net/davadi/3d3wbpt7/3/ ` $("#slider").slider({ ...

javascriptcssjquery-uihtml2canvas

Tips for enabling file uploads with the same name using jQuery.filer

Currently, I have implemented the jquery.filer plugin for handling file uploads on my webpage. While the plugin is functioning correctly, I have encountered an issue where if I attempt to upload the same file a second time, it fails to upload without displ ...

jqueryjquery-filer

Developing a Form Submission Feature Using JQuery Mobile

I'm having trouble submitting a form using JQuery Mobile. Currently, my code looks like this: <form action="#pagetwo" method="post" name="myform"> <input type="text" name="myname"> <input type="submit" value="submit" /> ... and th ...

javascripthtmljquery-mobile

The RSS XML feed causes jQuery Ajax to throw an error in Internet Explorer 9

On my ASPX page, I generate RSS XML in the following format: <?xml version="1.0" encoding="utf-8"?> <rss version="2.0"> <channel> <title>Article Feed</title> <link>http://www.example.com/articles</link> ...

jqueryxmlajax

Is gulp.dest set to match the current file?

I'm having trouble directing my compiled .css file to the same directory as its original .scss version. gulp.task('sass', function() { return gulp.src([ appDir + '/*.scss', appDir + '/**/*. ...

csssassgulpgulp-sass