HTML CSS examples for CSS Widget:Div Table
Wrapping a display:table DIV inside another div with exact height
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .overflow { border:2px solid Chartreuse; margin:2em; height:176px; } .overflow div { border:2px dashed yellow; margin:2em; padding:0.26m; } .overflow.auto { overflow:auto; border-color:blue; margin-top:6em; } .overflow.hidden { overflow:hidden; border-color:pink; } .overflow.table { display:table; border-color:OrangeRed; } </style> <!--from w w w . j a v a2 s . com--> </head> <body> <div class="overflow"> <div> Lorem ipsum </div> <div> Lorem ips </div> <div> Lorem ips </div> <div> Lorem ipsum dolor sit amet, consecte </div> <div> Lorem ipsu </div> <div> Lorem ipsum dolor sit a </div> </div> <div class="overflow auto"> <div> Lorem ips </div> <div> Lorem ips </div> <div> Lorem ipsum dolor sit amet, consecte </div> <div> Lorem ipsu </div> <div> Lorem ipsum dolor si </div> </div> <div class="overflow hidden"> <div> Lorem ips </div> <div> Lorem ips </div> <div> Lorem ipsum dolor sit amet, consecte </div> <div> Lorem ipsu </div> <div> Lorem ipsum dolor si </div> </div> <div class="overflow table"> <div> Lorem ipsum dolor sit amet, c </div> <div> Lorem ipsum dolor sit ame </div> <div> Lorem ipsum </div> <div> Lorem ipsum dolor sit amet, c </div> <div> Lorem ipsum dolor sit amet, co </div> </div> </body> </html>