html - Make objects fill remaining div vertically -
i have 2 buttons located within div, want them take entire space remaining vertically.
just now, looks this:
header --------------------------- button 1 button 2 --------------------------- footer how can make 2 submit buttons take entire space?
html:
<body> <header> <h1>{title}</h1> </header> <div id="wrapper"> <div id="main-content"> <!--<div class="innerinstructions">choose direction.</div>--> <form action="app-web.php" method="get" class="main-form clocking"> <input type="hidden" name="do" value="performclock" /> <input type="hidden" name="uid" id="uid" value="'.$uid.'" /> <input type="submit" name="clockaction" value="in →" accesskey="i" /> <input type="submit" name="clockaction" value="← out" accesskey="o" /> </form> </div> </div> <footer> <div id="time">{time}</div> </footer> </body> css:
#wrapper { position:absolute; z-index:1; top:45px; bottom:48px; left:0; width:100%; overflow:none; } #main-content { position:absolute; z-index:1; width:100%; padding:0; color: white; height: 100%; } .clocking{ margin-top: 5px; } .clocking input[type="submit"]{ /*width: 45%;*/ /*padding-top: 10%; padding-bottom: 10%;*/ height: 100%; min-height: 100%; font-size: 2em; font-weight: bold; background:#deb500; border: 1px solid white; color: white; border-radius: 5px; }
i have made demo fiddle take at
demo
this main code
html, body{ height:100%; margin:0; } header,footer{ height:10%; } form{ height:80%; } input[type="submit"]{ height:50%; display:block; width:200px; border:1px solid #fff; } 
Comments
Post a Comment