Question

I need to add this:

html, body{
height: 100%;
}

However, I am currently stuck in a CMS where I can only edit under the BODY tag, which means that I am not able to add anything to the header, adjust the stylesheet or similar. My only way to add this is inline past the body tag. I can also execute PHP within this space if that would in any way solve this.

Am I in an impossible situation or is there a solution?

Answer 1

You could output a javascript string with PHP that can adjust the styles:

print '<script>document.body.style.height = '100%'; document.body.parentNode.style.height = '100%';</script>';

That said, if you aren’t concerned about HTML validation and/or are using an HTML5 doctype, you can simply add a normal style tag anywhere. If you need to output this using PHP, just put it into a string (as I did with the above javascript):

print '<style type="text/css">html, body{ height: 100%; }</style>';

You may also want to look in to scoped style tags, a new addition to HTML5: http://dev.w3.org/html5/spec/the-style-element.html#attr-style-scoped

Documentation

• PHP print – http://php.net/manual/en/function.print.php
• Javascript element.style – https://developer.mozilla.org/en-US/docs/DOM/element.style
• Scoped style sheets – http://dev.w3.org/html5/spec/the-style-element.html#attr-style-scoped