A COMPLETE YET SIMPLE SOLUTION Updated 2022-08-30 (Added support for single row multiple textbox by default) The following code will work: On key input. With pasted text (right click & ctrl+v). With cut text (right click & ctrl+x). With pre-loaded text. With all textarea’s (multiline textbox’s) site wide. With Firefox (v31-67 tested). With Chrome (v37-74 … Read more
You can use calc: height: calc(100% – 18px); Note that some old browsers don’t support the CSS3 calc() function, so implementing the vendor-specific versions of the function may be required: /* Firefox */ height: -moz-calc(100% – 18px); /* WebKit */ height: -webkit-calc(100% – 18px); /* Opera */ height: -o-calc(100% – 18px); /* Standard */ height: … Read more
Add this to your <head> section: <script> function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + ‘px’; } </script> And change your iframe to this: <iframe src=”https://stackoverflow.com/questions/9975810/…” frameborder=”0″ scrolling=”no” onload=”resizeIframe(this)” /> As found on sitepoint discussion.
Try setting the height of the html element to 100% as well. html, body { height: 100%; } Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well. However the content of body will probably need to change dynamically. Setting … Read more
There are a couple of CSS 3 measurement units called: Viewport-Percentage (or Viewport-Relative) Lengths What are Viewport-Percentage Lengths? From the linked W3 Candidate Recommendation above: The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. These … Read more