CODEWITHSUNDEEP
css
wzazza
wzazza

Reputation: 853

min-height:100%; height:100%; not working

I cant figure out what is wrong with my styles.
Hope someone could help me with this.
Code example:

<style type="text/css">
.maindiv {
    overflow:hidden; border:#000 1px solid;
    width:450px; min-height:250px;
}
.left_inner {
    float:left; width:200px;
    min-height:100%; background:#00CC33;
}
.right_inner {
    float:left; width:150px; background:#C93;
}
</style>
<div class="maindiv">
    <div class="left_inner">Left Block content</div>
    <div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>

The way it should be is like in Opera Browser (see image): Sample image

Upvotes: 29

Views: 55681

Answers (5)

Freestyle09
Freestyle09

Reputation: 5518

Instead of using 100% you can use inherit keyword

/* Flex is used just for demonstration purposes */
.flex {
  display: flex;
  align-items: flex-start;
  border:#000 1px solid;
  width: 450px;
  min-height: 250px;
}
.left_inner {
  flex-basis: 200px;
  /* Change to this */
  min-height: inherit;
  background: #00CC33;
}
.right_inner {
  flex-basis: 150px;
  background: #C93;
}
<div class="flex">
    <div class="left_inner">Left Block content</div>
    <div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>

Upvotes: 0

Lance Caraccioli
Lance Caraccioli

Reputation: 1429

The Why

  1. One might intuitively assume (as I once did) that the html element already has a determined height, but it does not (at least in this context). Luckily (or by design) this one element has the unique property of it's height being determinable when it is assigned a percentage height. That is the essential concept because in order to calculate (determine) the height of any other element which is assigned a percentage height you must also be able to determine the height of it's parent.

  2. Anyone that has worked with CSS and the DOM enough likely will tell you they hate floats. This is because it pulls the element out of the flow, which requires additional work and thinking to juggle the effects. Instead use display:inline-block;vertical-align:top; with the one caveat that you will then have to add html comments around any white space between those elements.

The code

.maindiv {
    overflow:hidden; border:#000 1px solid;
    width:450px;min-height:250px;
    /*changes*/
    height:100%;
}
.left_inner {
    float:left; width:200px;
    min-height:100%; background:#00CC33;
    /*changes*/
    float:none;
    display:inline-block;
    vertical-align:top;
}
.right_inner {
    float:left; width:150px; background:#C93;
    /*changes*/
    float:none;
    display:inline-block;
    vertical-align:top;
}
/*changes*/
html,
body{
    height:100%;
}
<div class="maindiv">
    <div class="left_inner">Left Block content</div><!--
    --><div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>

Upvotes: 20

Constantin Virgil
Constantin Virgil

Reputation: 53

This is what eventually worked for me:

For the parent container (flex flex-col min-h-screen):

.parent-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* or your min height */
}

For the child element (flex-1):

.child-element {
    flex: 1;
}

Upvotes: 2

Michel
Michel

Reputation: 960

add 

html,
body {
  height:100%
}

at the top of your css, that works for me

EDIT: my test :

<!DOCTYPE html>
<html>

<head>
<style>
html,
body {
height:100%;
}

.maindiv {
   overflow:hidden; border:#000 1px solid;
    width:450px; height:100%;
position:relative;
}
.left_inner {
    float:left; width:200px;
    min-height:100%; background:#00CC33;
position:relative;
}
.right_inner {
    float:left; width:150px; background:#C93;
}
</style>
</head>
<body>
<div class="maindiv">
<div class="left_inner">Left Block content</div>
<div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>
</body>
</html>

Upvotes: 8

Aaron Brewer
Aaron Brewer

Reputation: 3667

Try this:

    <style type="text/css">
.maindiv {
    overflow:hidden; border:#000 1px solid;
    width:450px; height: auto; min-height:250px;
}
.left_inner {
    float:left; width:200px;
    min-height:100%; height: 100%; background:#00CC33;
}
.right_inner {
    float:left; width:150px; background:#C93;
}
</style>
<div class="maindiv">
    <div class="left_inner">Left Block content</div>
    <div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>

Most of the time you have to apply a height of auto or 100% to the parent DIV.

Upvotes: 0

Related Questions