CODEWITHSUNDEEP
htmlcss
Becky
Becky

Reputation: 2289

How to expand a div to match another div

I have a section that I am wanting to expand with an expanding menu I have on the right hand side. Right now my section, projects-main-section's height is set at 800px. Obviously, this will not expand with the expandable menu on the right. I have tried setting the height to 100% and 100 vh, but both of those methods did not work.

So I have both sections, the projects-main-section and project-section-container (the expandable menu on the right) wrapped around a main container projects-main. I figured this would help to get the projects-main-section to grow with it, but no luck so far.

So, as the expandable menu grows in height, I want the projects-main-section to grow with the expanding projects-main parent div, but not exceed the footer.

How can I do this?

Fiddle

Here is what it looks like static.

Static

When the menu expands, it looks like this. You will see the left container, projects-main-section, has a large gap under it from the footer.

Expanded

<div id="projects-main">
        <div id="projects-main-section">
            <div id="projects-main-section-title-wrap">
            </div>
        </div><div id="project-section-container">
    </div>
</div>

#projects-main {
    height: auto;
}
#projects-main-section, #project-section-container {
    display: inline-block;
    vertical-align: top;
}
#projects-main-section {
    height: 800px;
    background: #6f9697;
    width: 40%;
}
#project-section-container {
    height: auto;
    width: 60%; 
}

Upvotes: 0

Views: 1674

Answers (1)

Asons
Asons

Reputation: 87191

May I suggest using flex

html, body{
  margin: 0;
}
.flex{
  display:flex;
}
.flex.column {
  flex-direction: column
}
.over, .under {
  background: #0099cc;
  height: 75px;
}
.content{
  flex: 1;
}
.left_col {
  background: orange;
  width: 50%;
}
.right_col {
  background: lightgreen;
  width: 50%;
}
<div class="flex column container">
  <div class="over">
  </div>
  <div class="flex content">
    <div class="left_col">
      Grows with right column
    </div>
    <div class="right_col">
      long content <br>long content <br>long content <br>long content <br>
      long content <br>long content <br>long content <br>long content <br>
      long content <br>long content <br>long content <br>long content <br>
      long content last
    </div>
  </div>
  <div class="under">
  </div>
</div>

Upvotes: 1

Related Questions