CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Denis Fedak
Denis Fedak

Reputation: 171

Height 100% when parent height is auto

For example, I have following html:

<html><head>
        <link href="css/bootstrap.css" rel="stylesheet">
        <style type="text/css">
            .col-1{
                height: 300px;
            }
            .col-2{
                /*
                height: 100% not working, how to stretch col-2 like col-1
                */
            }
         </style>
    </head>
    <body>
        <div class="container">
            <div class="col-md-6 col-1">
            </div>
            <div class="col-md-6 col-2">
            </div>
        </div>

</body></html>

Height of container is auto, but actual height is defined, because col-1 height is 300px. How to set col-2 height 100% of actual parent height?

Upvotes: 2

Views: 1525

Answers (3)

Huy Nguyen
Huy Nguyen

Reputation: 2060

You have to add .row outside of any col-* because col-* have float attribute. To make the same height of col-*, add .row-eq-height with this style:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

The HTML is like this:

<div class="container">
  <div class="row row-eq-height">
    <div class="col-md-6 col-1">
      a
    </div>
    <div class="col-md-6 col-2">
      b
    </div>
  </div>
</div>

DEMO

Upvotes: 3

thebigsnax
thebigsnax

Reputation: 11

min-height:100% usually works.

<html>
<head>
<style type="text/css">
.container {position:relative;height:600px;width:100%;background-color:black;}
.col-1{float:left;width:50%;height:300px;background-color:red}
.col-2{float:left;min-height:100%;width:40%;background-color:green}
</style>
</head>
<body>
<div class="container">
  <div class="col-md-6 col-1"></div>
  <div class="col-md-6 col-2"></div>
</div>
</body>
</html>

Here is a sample: https://jsfiddle.net/001cbskq/

You are using bootstrap but I am not in this example.

Upvotes: 1

Jamdev
Jamdev

Reputation: 552

Maybe you should try to use "row row-eq-height" classes.

Try to use <div class="row row-eq-height"></div> instead of <div class="row"></div>

And add this CSS property to your custom CSS

.row-eq-height{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

Upvotes: 1

Related Questions