mkbaines asked this 6 years ago

HTML Page height more than body height

Hi,

I have a responsive Wordpress page designed by drag and drop page builder Profit Builder. This page is scrollable beyond its content. There is extra white space that can be scrolled down, more visible in mobiule view. The page builder already has the CSS for responsiveness:

body{
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

Digging further I found, by setting a border for body element that the white space is outside the body. Also the height for html element and body element shows up differently in the google developer console. I havent added any extra CSS other than those generated by the page builder. 


Best Answer by raj 6 years ago

Try applying same style to html and body elements

body, html {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

The html element and body element are different elements and the body element is child. The html elements height and width are controlled by browser window.