CODEWITHSUNDEEP
htmlcss
karns
karns

Reputation: 5847

Two Sections 100% Height of Parent Div

I have a specific layout that is causing me HUGE headaches. Here is an image:

enter image description here

My goal is to have the "Side panel" ALWAYS equal the height of the container. The "Enrollment Application" section is at 100% height already.

Current Markup

<body>
    <div id="container" class="pure-g">

        <div class="pure-u-md-1-4 pure-u-1 panel" id="left-panel">
            <div class="panel-row">
                <div class="panel p">
                    <div class="inner-panel">
                        <div class="panel-logo">
                             "Logo here text"
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-row">
                <div class="panel p">
                    <div class="inner-panel">
                        <nav class="panel">

                        </nav>
                    </div>
                </div>
            </div>
        </div>
        <div id="right-panel" class="pure-u-md-3-4 pure-u-1 panel p">
            <div class="inner-panel">
                <header class="pure-g">
                    <div class="pure-u-md-1-4 pure-u-1 header-logo">
                        LOGO Would go here, of course.
                    </div>
                    <div class="pure-u-md-3-4 pure-u-1 header-title">
                        <h1>Consumers Energy</h1>
                        <h1><strong>CARE 3.0 Program</strong></h1>
                        <h1>Enrollment Application</h1>
                    </div>
                </header>

                <div id="content">
                    "Enrollment application text..."
                </div>
            </div>
        </div>
    </div>
</body>

Current CSS

.panel {
  box-sizing: border-box;
  height: 100%;
  display: table-cell;
}
.panel.p {
  padding: 3px;
}
.panel .panel-row {
  display: table-row;
}
.panel .inner-panel {
  border-radius: 5px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  background-color: red;
}

Here is an alternative fiddle to play with: http://jsfiddle.net/3c3tqo3e/ but I really don't want to use a table...

Q How can we stack two divs and make their heights = 100% of parent? The "Logo here.." section will be an auto height.

NOTE I would really prefer an answer that is responsive-friendly. I am using PureCSS for the sections. (This means that absolute positioning is not preferred) Also, strongly prefer just css/html. Thanks!

Upvotes: 0

Views: 180

Answers (1)

Dipak
Dipak

Reputation: 12190

I have created a demo for you, but it will work on all modern browsers only. and you might have to read flexbox and its demos in details to make your work more meaningful in terms of performance and maintenance.

Also read on calc() here

HTML: 

<main>
    <aside>
        <div class="logo">Logo</div>
        <div class="aside-content">Other Content</div>
    </aside>
    <section>Section</section>
</main>

CSS: 

html, body{ height: 100%; }
main{
    height: 100%; background: teal; padding: 2em; box-sizing: border-box;
    display: flex; flex-direction: row; 
}
aside{
    height: inherit; margin: 0 1em 0 0; width: 200px;
}
aside .logo{
    background: #fff; height: 140px;
}
aside .aside-content{
    background: #fff; height: calc(100% - 150px); margin: 10px 0 0 0;
}

main section{
    height: inherit; background: #fff; flex-grow: 2;
}

Demo Fiddle: http://jsfiddle.net/vpqqyo9L/1/

Edit:

Here's one for IE9: http://jsfiddle.net/vpqqyo9L/3/

Upvotes: 2

Related Questions