css - i can't fit <div> container to 50% -
i have simple code:
<!doctype html> <html lang="pl"> <head> <meta charset="utf-8" /> <style type="text/css"> html{ background-color: red; height: 100%; } body { background-color: black; min-height: 50%; padding: 10px; } .wrap{ width: 100%; height: 50%; background-color: green; } </style> </head> <body> <div class="wrap"> test </div> </body> </html> i expect fit .wrap container 50% of parent container (body). doesnt work... if change height property ex. height: 150px; , css working fine... don't understand why.
thank response! examle, not real layout. idont understand why cannot wrap .wrap container 100% of body container (black color) % unit. think responsive layout , must use % unit, not px or others. besides, little illogical situation :)
try demo
css:
html { background-color: red; height: 100%; } body { background-color: black; height: 50%; padding: 10px; } .wrap { width: 100%; min-height: 50%; background-color: green; }
Comments
Post a Comment