| Header |
Scrollable Body |
When content vertically overflows, the expected outcome is this (red is the scrollbar):
| Header | |
Scrollable Body | |
So in the early versions of Internet Explorer, it expresses evilness like so:
| Header |
Scrollable Body |
So yea. The only way to make IE behave properly is to use conditional CSS properties and native javascript. I would use jQuery because I'm noob, but I got too lazy to find the CDN link.
Here is the code below:
<!DOCTYPE html> <!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if (gt IE 8)|!(IE)]><!--> <html class=""> <!--<![endif]--> <head> <title>Floating Header</title> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } #container { width: 100%; height: 100%; position: relative; } #header { width: 100%; height: 120px; background: blue; position: absolute; top: 0; left: 0 } #content-scroll-container { overflow: auto; overflow-x: hidden; background: black; width: 100%; height: 100%; padding: 0; } #content { margin-top: 120px; color: white; } .tbl-whole-span { width: 100%; margin: 0; padding: 0; } .tbl-whole-span td { background: gray; } </style> </head> <body> <div id="container"> <div id="header"></div> <div id="content-scroll-container"> <div id="content"> First line of destruction <br/> <input id="btnAddLine" type="button" value="Add Line" onclick="addLine()" /> <br/> <table class="tbl-whole-span"> <tr> <td> Some table contents here. <span style="float:right">Text to the right</span> </td> </tr> </table> Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/>Some content, some content <br/> </div> </div> </div> <script> ; // Adjust content width when vert scrollbar appears function adjustWidth() { var scrollDiv = document.getElementById("content-scroll-container"); var contentDiv = document.getElementById("content"); var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; var newWidth = scrollDiv.offsetWidth - scrollbarWidth; var percentageWidth = newWidth * 100.00 / scrollDiv.offsetWidth; contentDiv.style.width = percentageWidth + "%"; } // Function to add content. This function relies on calling // adjustWidth. function addLine() { var content = document.getElementById("content"); content.innerHTML += "Line Added<br />"; // Detect version of IE here. Modify if needed. var html = document.getElementsByTagName("html")[0]; if (html.className != "") adjustWidth(); // adjust width only if class is IE } </script> </body> </html>
No comments:
Post a Comment