Skip to content

Instantly share code, notes, and snippets.

@livimonte

livimonte/box-min-height-100.html

Last active March 28, 2022 23:30
Show Gist options
  • Save livimonte/4498484 to your computer and use it in GitHub Desktop.
Save livimonte/4498484 to your computer and use it in GitHub Desktop.
Download ZIP
Take 100% height of inner div with min-height in the container. Crossbrowser, only html and css.
Raw
box-min-height-100.html
<!DOCTYPE html>
<head>
<style>
.main {
overflow:hidden;
border:#000 1px solid;
width:450px;
position: relative;
min-height: 50px;
}
.left_inner {
float:left;
width:200px;
height: 100%;
background:#00CC33;
position: absolute;
}
.right_inner {
float: right;
width:150px;
background:#C93;
height: 220px;
}
.text{
height: 30px;
margin-top: -15px;
position: absolute;
top: 50%;
width: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<div class="left_inner">
<div class="text">Left Block content</div>
</div>
<div class="right_inner">
Right block content <br />
sample txt <br />
sample txt
</div>
</div>
</body>
</html>
@davidhenley
Copy link

Just want to thank you for this. Saved me from hours of trying to get this to work.

@perymimon
Copy link

I don't know why height:100% of content inside container with min-height not working. but thanks for your solution . it save me also

@otinanaipali
Copy link

Warning: If the "absolute" element is taller than its parent, you have issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment