html - Height 100% not working properly while resizing browser -
i having issue in using height . have used height:100% div in page. , set background color that. works fine while browser maximised. when resized div not rendered properly.
my problem when resize browser window , scroll appears div background color not rendered whole div. rendered portion have seen when resize window.
my styleclass
html,body{height:100%;} .rightdiv{ height:100%;width: 39%;background: #3f5d91;float: right;color: #f0f0f0;} plz help me out of problem.
thanks in advance.
i've tested using local html file:
<!doctype html> <html> <head> <style> html,body{height:100%;} .rightdiv{height:100%;width: 39%;background: #3f5d91;float: right;color: #f0f0f0;} </style> </head> <body> <div class="rightdiv">hello</div> </body> </html> and on firefox 18.0.2/windows7 see div on right, coloured blue, , see scroll bar when full-screen, or resized.
scrolling reveals rest of div background colour intact, can't business relationship why see that.
however, i'm wondering if want see scroll bar. setting element 100% means want fill viewport, not spill over. if case, need remove default margin browser applies elements contain div, e.g. body. setting:
html,body{margin:0; height:100%;} will create div fit properly.
incidentally, sites codepen , jsfiddle offer alternative of applying reset style sheets normalize , reset, , should watch out these beingness pre-selected when create new pen/fiddle (jsfiddle normalize).
html css
No comments:
Post a Comment