How to get width of a div in percentage using jQuery? [duplicate]

Answer 1

$(document).ready(function(){
   var f = $('.f').width();
    var pw = $('.f').parent().width();
    var rate = (f/pw*100) + '%';
    $('.f').html( rate);    
});

it is parent item's with. So if you rate the .f div's width to parent item's width you get that value.

Answer 2

If you want the width relative to the body:

var percent =  $('.f').width() / $('body').width() * 100;

console.log(Math.round(percent).toFixed(2)); 

Is this what you're asking for?

http://jsfiddle.net/aXRxP/5/

Answer 3

To use your example code...

$(document).ready(function(){
   var f = $(".f").width() / $('.f').parent().width() * 100;
   alert(f);    
});

Working jsfiddle...

Answer 4

you will need to get viewport width and then calculate your element width percentage in accordance with viewport width.

var width = $('#someElt').width();
var parentWidth = $('#someElt').offsetParent().width(); // this will return parent element's width which also can be replaced with docuent to get viewport width
var percent = 100*width/parentWidth;