CODEWITHSUNDEEP
htmlcss
Jablalr
Jablalr

Reputation: 305

Cannot get child DIV % height to work because of parent margin auto

Am working within an existing framework so am limited in the CSS / HTML that I can edit. I have two child DIV's in a parent that I want to be 80% and 20% of the height of the parent. However, as the parent has 'margin: auto;' I am unable to get the height to work.

Can anyone help please? I know I could use JS to fix this, but have a strong preference not to. Would prefer a CSS fix if possible.

Please note that because I am working within a 3rd party product framework I cannot change the HTML or CSS beyond the areas marked.

See jsFiddle for an example of the problem: https://jsfiddle.net/6vb5910m/

Thanks

<html>
<body>
    <div class="flexer">
        <div class="template-container">
            <div class="template-contents">
            <!-- Cannot change anything above this line -->

                    <div class="ztop" style="background: rgb(200,0,0,0.3);">
                        I am 80% of Parent Height
                    </div>
                    <div class="zbottom"  style="background: rgb(0,200,0,0.3);">
                        I am 20% of Parent Height
                    </div>

            <!-- Cannot change anything below this line -->
            </div>
        </div>
    </div>
</body>

Upvotes: 4

Views: 491

Answers (4)

Yann39
Yann39

Reputation: 15699

If your parent has an auto height, I'm afraid this is not possible.

The parent will always extend to contain all the children, so its height depends on the height of the children.

If your children also depend on the parent height, you have a infinite loop.

I think the only solution is to go with some Javascript, with which you can get the parent height dynamically and apply the right height to the children.

Or maybe if you don't need the auto height on this page you can override the template-contents's height directly in the source so it does not apply to other pages ?

<html>
    <body>
        <div class="flexer">
            <div class="template-container">
                <div class="template-contents">
                <!-- Cannot change anything above this line -->

                    <style>
                        .template-contents {
                            height: 100%;
                        }
                    </style>

                    <div class="ztop" style="background: rgb(200,0,0,0.3);">
                        I am 80% of Parent Height
                    </div>
                    <div class="zbottom"  style="background: rgb(0,200,0,0.3);">
                        I am 20% of Parent Height
                    </div>

                <!-- Cannot change anything below this line -->
                </div>
            </div>
        </div>
    </body>
</html>

Upvotes: 1

Justin Kahn
Justin Kahn

Reputation: 1349

You can always override the CSS even when you can't change the HTML. So just add this

.template-contents {
  margin: 0 auto;
}

This keeps the horizontal margin auto, but removes the vertical.

Upvotes: 0

Ismail Rubad
Ismail Rubad

Reputation: 1468

Use height 100% into the parent element.

.template-contents {
    display: block;
    margin: auto;
    text-align: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

Or change the margin to 0 auto

.template-contents {
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

Upvotes: 0

Andr&#233; DS
Andr&#233; DS

Reputation: 1901

Your percentage height is not working because your parent don't have any height :)

Just add height: 100%; to .template-contents and it'll work :

.template-container {
  display: flex;
  width: 100%;
  padding: 10px;
  text-align: center;
  height: 100%;
  box-sizing: border-box;
  list-style: none;
  line-height: 1.42857;
}

.template-contents {
  display: block;
  margin: auto;
  text-align: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.flexer {
  width: 200px;
  height: 200px;
  border: 1px solid;
}

.ztop {
  height: 80%;
}

.zbottom {
  height: 20%;
}
<html>

<body>
  <div class="flexer">
    <div class="template-container">
      <div class="template-contents">
        <!-- Cannot change anything above this line -->

        <div class="ztop" style="background: rgb(200,0,0,0.3);">
          I am 80% of Parent Height
        </div>
        <div class="zbottom" style="background: rgb(0,200,0,0.3);">
          I am 20% of Parent Height
        </div>

        <!-- Cannot change anything below this line -->
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 0

Related Questions