asked on

How to get a child div to span the entire parent div

Hello,
Need some help,,

How do I get the child div to span the entire parent div.. I am using bootstrap and have footer and I would like to have two equal column with icon..

Here is a plunk
http://plnkr.co/edit/JXC6Frq3OReTmdH76NEm?p=preview

I would like each div to size to the parent

Here is code

 <footer class="footer navbar-fixed-bottom" style="background:red;height:4em">
      <div class="container-fluid">
      	<div class="row">
			<div class="col-xs-6 col-md-6 footerSeachButton">
				<a class="button" href="#">
	                <div>
	                  <span class="glyphicon glyphicon-search" aria-hidden="true"> </span>    
	                  <span>Search</span>
	                </div>
	              </a>
			</div>
			<div class="col-xs-6 col-md-6 footerLoginButton">
				<a class="button" href="#">
                <div>
	                  <span class="glyphicon glyphicon-search" aria-hidden="true"> </span>    
	                  <span>Login - Register</span>
                </div>
              </a>
  			</div>
		</div>
		</div>
		</footer>

Open in new window

.footerLoginButton
 {
 
  background:#00308f;
 }
 .footerSeachButton
 {
 	background:#2175d9;
 }

Open in new window

Thanks

Scott Fell

You will want to place the nested div inside a row class. I have a more simplified example http://plnkr.co/edit/JXC6Frq3OReTmdH76NEm?p=preview note the top vs the bottom with the row class nested.

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.2" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <!-- top -->
<div class="row green threehundred">
  <div class="col-xs-6 red">stuff</div>
  <div class="col-xs-6 blue threehundred">
    <div class="col-xs-12 purple">more</div>
  </div>
</div>
<hr>
<!-- bottom -->
<div class="row green threehundred">
  <div class="col-xs-6 red">stuff</div>
  <div class="col-xs-6 blue threehundred">
    <!-- add row class above nested div -->
    <div class="row">
      <div class="col-xs-12  purple">more</div>
    </div>
  </div>
</div>

  </body>

</html>

Open in new window

chand pb

ASKER

Thanks .. but it did not seem work for me . I would like the height to span the entire length of the parent

here is the plunk of your example

http://plnkr.co/edit/rnTPHbTuMg43TQncbmIG?p=preview

As you can see the red and purple span horizontally but not vertically...

sorry ..

chand pb

ASKER

Do I have to give each child div (red and purple) a height of 300..?

Thanks

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Scott Fell

I didn't see your 2nd post. You can give each a height, but like I said, the container height should be all you need. If the height is static, then css will do the trick.

If you have uneven columns like

<div class="row">
     <div class="col-xs-6">one line</div>
     <div class="col-xs-6">
        <p>one</p><p>two</p><p>three</p>
    </div>
 </div>

Open in new window

Then the row will always be the height of the tallest column. You can use a minimum height too.