html - Two Sections 100% Height of Parent Div -


i have specific layout causing me huge headaches. here image:

enter image description here

my goal have "side panel" equal height of container. "enrollment application" section @ 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 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 alternative fiddle play with: http://jsfiddle.net/3c3tqo3e/ don't want use table...

q how can stack 2 divs , make heights = 100% of parent? "logo here.." section auto height.

note really prefer answer responsive-friendly. using purecss sections. (this means absolute positioning not preferred) also, prefer just css/html. thanks!

i have created demo you, work on modern browsers only. , might have read flexbox , demos in details make work more meaningful in terms of performance , 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 1 ie9: http://jsfiddle.net/vpqqyo9l/3/


-

Comments

Post a Comment