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

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -