Try this code in Chrome, Firefox, and IE:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Textarea problem</title> <style type="text/css"> html, body { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 0; padding: 0; margin: 0; } #container { position: absolute; top: 4px;bottom: 4px; right: 4px;left: 4px; background-color: grey; } #ta { position: absolute; bottom: 0; right: 0; top: 0; left: 0; border: black 4px solid; padding: 0; margin: 0; background-color: orange; padding: 8px; } </style></head> <body> <div id="container"> <textarea id="ta" >This textarea should fill the window. But FF and IE leave the dimensions at the defaults! This happens when the corner offsets are specified; not when width and height are specified. But 100% width and height do not play with the box model when using padding and borders. </textarea> </div> </body> </html>
I notice that this happens for inputs as well. They do not react, like ordinary elements of a block, to the dimensions indicated above / below and left / right.
My workaround is to put the border and fill in the container and set the textarea position relative to and the width / height to 100%. But this is not ideal, because the textarea scrollbars are within the strip, which is unacceptable to me from the point of view of the user interface.
Is there something I am missing? How can I make top / right / bottom / left work for text areas in FF / IE?
source share