Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS set div 'top' with jquery from div 'height'

Tags:

jquery

css

I have a template with lots of absolute positioning, now my main text div has a dynamic height and I need a dynamic footer which follows after this.

I tried to set the top state of the footer div with the height value from the text div.

 <script type="text/javascript">
    $("#footer").top($("#text").height());
    </script>

Unfortunately, Chrome Dev tools throws the error:

Uncaught TypeError: Object [object Object] has no method 'top' (anonymous function)

So any idea or help for my problem?

Edit:

So i tried

 $('#footer').css('top', $('#text').outerHeight() + 'px');

and it works well, is it possible to add some px to this top value?

like image 948
Denny Mueller Avatar asked Mar 16 '12 12:03

Denny Mueller


People also ask

How to get the height of a Div using jQuery?

The height of the div will be 100px. We will have an input field that will allow the user to enter a new height for the div. Here is the HTML code. We can utilize the jQuery click () method to run a function when a user enters a new height. We can use the val () method to get the new height the user has entered.

What is the use of height in CSS?

CSS Setting height and width The height and width properties are used to set the height and width of an element. The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.

What is the maximum width of a CSS element?

CSS. Height and Width. The CSS height and width properties are used to set the height and width of an element. The CSS max-width property is used to set the maximum width of an element. This element has a height of 50 pixels and a width of 100%.

Does automatic Div height=100% work in Firefox?

automatic div height=100% wont work in firefox.. I kan fix this if i get the height in px and then i can subtract header and footer heights, and setting the top margin will float my div between header and footer :) @basteralfred trying adding height: 100% to the html and body tags.


1 Answers

You will need to set the css property 'top' on the #footer div, not call .top() on the div itself.

$("#footer").css('top', $("#text").height() + "px");

or along those lines

like image 58
dougajmcdonald Avatar answered Nov 10 '22 01:11

dougajmcdonald