0 votes
1 view
in Web Technology by (22.4k points)

I have a site with the following structure:

<div id="header"></div>

<div id="main">

  <div id="navigation"></div>

  <div id="content"></div>

</div>

<div id="footer"></div>

The navigation is on the left and the content div is on the right. The information for the content div is pulled in through PHP, so it's different every time.

How can I scale the navigation vertically so that its height is the same as the content div's height, no matter which page is loaded?

1 Answer

0 votes
by (40.3k points)

For the parent: 

display: flex;

You should add some other prefixes as well. For more information refer to this doc: http://css-tricks.com/using-flexbox/.

Note: align-items: stretch; is not needed. Its usage is also for the parent, not children. But, if you want to define children stretching, you can use align-self like this:

.parent {

  background: red;

  padding: 10px;

  display:flex;

}

.other-child {

  width: 100px;

  background: yellow;

  height: 150px;

  padding: .5rem;

}

.child {  

  width: 100px;

  background: blue;

}

<div class="parent">

  <div class="other-child">

    Only used for stretching the parent

  </div>

  <div class="child"></div>

</div>

Related questions

Welcome to Intellipaat Community. Get your technical queries answered by top developers !


Categories

...