Does CSS height depend on width? -
i have textarea , want in left of screen, little margin. thought i'd set height:98%; , width:48%; , margin:1% 1% 1% 1%;. but, height more 98% (it off screen), , in same in major browsers (chrome, opera, firefox, ie, , safari, latest versions). however, opening debugging console in chrome changes textarea's height, though (the debugging console) affects width of screen. why this, , how can prepare this? here code:
<html> <head> <title>why oh why</title> <style> body { margin:0px;padding:0px; } #fullscreen { position:fixed; left:0px; top:0px; width:100%; height:100%; background:rgba(168,168,168,1); } #input { resize:none; width:48%; height:98%; margin:1% 1% 1% 1%; float:left; border:0px; padding:0px; } </style> </head> <body> <div id="fullscreen"> <textarea id="input" rows="10" cols="50"></textarea> </div> </body> </html>
vertical margin or padding in % takes parent's width reference, when margin:1%; on screen of 1200px wide, gives margin of 120px , no matter wich height window
see explanation, reminder on wc3 :http://www.w3.org/tr/css2/box.html#margin-properties
here codepen play , see vertical-padding in percentage involves in layout :)
css height textarea
No comments:
Post a Comment