google chrome - Cross-browser CSS help - min-height issues (2 column fullscreen layout) -
in ie9 colleft goes bottom, in chrome & firefox (latest versions), not. also, in ie, textfeed div not fill remaining height. need cross-browser expertise here... thanks!! edit: wondering if maincontainer necessary?
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>css help</title> <style type="text/css"> html { height: 100%; } body { margin: 0; padding: 0; height: 100%; background: #787b1b; overflow: hidden; }
edit: added frmonscreenpresenter height made better, textfeed div still not showing correctly in chrome , firefox
#frmonscreenpresenter { height: 100%; } #maincontainer { width: 100%; height: 100%; /*min-height: 100%;*/ margin: 0px; } #colleft { /* logo pane */ float: left; width: 25%; height: 100%; min-height: 100%; background: #c3d021; vertical-align: top; text-align: center; margin: 0; padding: 0; } #colright { height: 100%; min-height: 100%; background: #787b1b; margin: 0; padding: 0; } #videofeed { /* video feed pane*/ background: #787b1b; width: 100%; height: 75%; min-height: 75%; margin: 0; padding: 0; } #textfeed { /* text feed pane */ background: #e1ac55; float: left; width: 100%; margin: 0; padding: 0; vertical-align: middle; overflow: hidden; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(window).resize(function () { if ((window.fullscreen) || (window.innerwidth == screen.width && window.innerheight == screen.height)) { $("html").css("overflow", "hidden"); } else { $("html").css("overflow", "auto"); } }); $(document).ready(function () { $(window).resize(); // trigger function when page loads // if have $(document).ready(), add line }); </script> </head> <body> <form id="frmonscreenpresenter"> <div id="maincontainer"> <div id="colleft"> not go bottom in firefox & chrome </div> <div id="colright"> <div id="videofeed"> video feed goes here </div> <div id="textfeed"> text feed goes here... not go down remaining height in ie </div> </div> </div> </form> </body> </html>
Comments
Post a Comment