<div class="editor fix-height"> <header class="informations fix-width"> <input id="subject" class="fix-width" type="text" value="" placeholder="Subject" /> </header> <div class="main fix-height"> <textarea id="body" class="fix-height fix-width" placeholder="Body"></textarea> </div> <footer class="status fix-width"> <div id="status-message">Ready.</div> </footer> </div>
/* Base */ html,body { height:100%; margin:0; } /* Common */ .fix-height { box-sizing: border-box; height: 100%; } .fix-width { box-sizing: border-box; width: 100%; } /* General */ .editor { margin: 0; padding: 30px 0 20px; } /* Informations */ .informations { height: 20px; left: 0; position: absolute; top: 0; } .informations input { height: 30px; } /* Body */ .main { height: 100%; } #body { resize: none; } /* Status */ .status { background-color: #eee; bottom: 0; color: #666; font-size: 12px; height: 20px; left: 0; line-height: 16px; padding: 2px 4px; position: absolute; text-shadow: 1px 1px #fff; width: 100%; }