CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Arun Prakash
Arun Prakash

Reputation: 9

When I mention height and width of element as 100% it renders in different browsers with different height in pixels

I am working on application to capture the Dom of the webpage that are rendered in different browsers. I am getting the json of the Height and width top and left position of the element in browser. I figured out there is difference in height and width depends upon the browsers toolbars etc.. when i mentioned the css of html, body as 100%.

eg : chrome 

{
  "elementName": "BODY",
  "xpath": "/html/body",
  "top": 0,
  "left": 0,
  "width": 1350,
  "height": 100,
  "absX": 8,
  "absY": 18
}

eg : Firefox 

  {
    "elementName": "BODY",
    "xpath": "/html/body",
    "top": 0,
    "left": 0,
    "width": 1350,
    "height": 120,
    "absX": 8,
    "absY": 18
 }

Here you can see that height of body is more by 20px in firefox compared to chrome. so my question is how to make the width and height same for all the browsers or how to ignore the height difference.

Upvotes: 0

Views: 195

Answers (2)

Rohit Kumar
Rohit Kumar

Reputation: 2031

It totally depends on the method you use to calculate height of the element, like I used getBoundingClientRect().height (here) to get the exact height of the element div, this height is shown same in all major browsers.

Also, check here in which

html, body {
    width: 100%;
    height: 100%;
}

which also shows the same height in all browsers.

Upvotes: 0

ARIF MAHMUD RANA
ARIF MAHMUD RANA

Reputation: 5166

I think this is because different browsers have different default line-heights, so if you set your element to a specific line-height, it will look the same on all browsers.

Upvotes: 1

Related Questions