html - Why the height of iframe in percentage is not working in my case? -
i have page 100% of browser height.
the page has 3 iframe: id_iframe_top, id_iframe_middle_left , id_iframe_middle_right.
id_iframe_top on top , has width of 100%.
id_iframe_middle_left , id_iframe_middle_right side side; id_iframe_middle_left has width of 30% , id_iframe_middle_right has width of 70%.
this html:
<body> <div id="id_div_top_row"> <iframe id="id_iframe_top" frameborder="0" src=""> </iframe> </div> <div id="id_div_middle_row"> <iframe id="id_iframe_middle_left" frameborder="0" src=""> </iframe> <iframe id="id_iframe_middle_right" frameborder="0" src=""> </iframe> </div> </body> this css:
html { background: green; height: 100%; } body { background: white; position: absolute; top: 0; bottom: 0; right: 0; left: 0; } iframe { box-sizing: border-box; } #id_iframe_top { background-color: red; width: 100%; } #id_iframe_middle_left, #id_iframe_middle_right { float: left; } #id_iframe_middle_left { background-color: pink; width: 30%; } #id_iframe_middle_right { background-color: yellow; width: 70%; } this jsfiddle: http://jsfiddle.net/srhcan/6fsqdyy3/1/
now trying set height of each of iframe in percentage. set height of id_iframe_top 20% , heights of id_iframe_middle_left , id_iframe_middle_right 80% in css:
#id_iframe_top { background-color: red; width: 100%; height: 20%; } #id_iframe_middle_left, #id_iframe_middle_right { float: left; height: 80%; } but there no affect; no matter percentage set height, not working.
why not working , how can fix it?
you want set height of div wraps iframe example:
#id_div_top_row { height:80%; } #id_iframe_top { background-color: red; height:100%; width: 100%; } and if want iframe stretch entire div, set the height of iframe 100% of div
here jsfiddle
Comments
Post a Comment