Two Vertical Divs Within a 100% Height Div

Two vertical divs within a 100% height div

Use position: relative combined with position: absolute.

Live Demo

Get rid of these last two lines:

div#iHeader { height:50px; background:#009900; }
div#iWrapper  { height:100%; padding-top:-50px; padding-bottom:-150px; overflow:auto; }

Replace them with:

div#list {
    position: relative
}
div#iHeader {
    height:50px; background:#009900;

    width: 100%;
    position: absolute;
    top: 0;
    left: 0
}
div#iWrapper { 
    overflow:auto;

    width: 100%;
    position: absolute;
    top: 50px;
    left: 0;
    bottom: 0
}

Two vertical child elements need to fit 100% height of parent, both dynamic heights

So, there are a few tricks to get this appearance. The simple way is to set overflow: hidden on the .snippet-text-section class. That will just hide any content hanging over the edge. But, that will hide any content hanging over the edge, so it is a double-edge sword.

The bleeding edge forward looking way to do it is via the flexbox property. For this, the code would look like:

.snippet-text-section {
    display: flex;
    flex-direction: column;
}
.snippet-text {
    flex: 1 1 auto;
}

Live demo. Limited support on this, but much better for the future. You could do a feature support check via modernizr (or on your own) and then fallback to overflow: hidden;, or another method, if the browser doesn't support it.

Wrapping 2 vertically stacked divs, 1 div 100% high

You can use the viewport unit vh. 100vh = 100% of the viewport height.

http://jsfiddle.net/ggsztx78/3/

#top {
    width: 100%;
    height: 100vh;
    background-color: #f4f;
    display: table;
}

Support isn't that bad if you are not using vmin or vmax.

How to stack two divs vertically (and within another div) when the top div can change height?

Here's an example. In this I fixed the height of the bootom div and the upper div adjust its height to fill out the container div.

If you want upper div to have fixed height, just switch their classes.

The green one is their container, you can adjust its height to your reuirements.

*{  box-sizing: border-box;}body, html, .bodyDiv{  height: 100%;  width: 100%;  margin: 0;}.bodyDiv{  display:flex;  flex-direction: column;  background-color:green;}#container{    margin: 0 auto;    width:80%;    background-color: white;    border: 0.2em solid black;    flex-shrink:0;    flex-grow:1;}#footer{    margin: 0 auto;    width:80%;    text-align: center;    height:1.5em;    background-color: white;    border: 0.2em solid black;    flex-shrink:0;}

<div class="bodyDiv"><div id="container">    test column 2    <p>    blah blah blah...    </p>    <p>    blah blah blah...    </p></div><div id="footer">test content</div></div>

Align two divs vertically in right of div

Another options if this is something you are building from scratch, is to use a framework like zurb foundation

This will give you the tools to build this kind of thing very quickly and easily, and not only that, loads of other 'complicated' stuff too. I build near all of my sites in this and it removes about 75% of the time and effort. You can then stipulate what happens on mobile and tablet sizes etc.

Something like this would look like....

<div class="row">
    <div class="medium-6 small-12 columns">
        <div id="one" class="small-12 columns">
            Your content
        </div>
        <div id="two" class="small-12 columns">
            Your content
        </div>
    </div>
    <div id="three" class="medium-6 small-12 columns">
        Your content
    </div>
</div>

How to limit height of div when part of 2 vertical divs in fixed parent div

If using Flexible box layout is an option, it can be achieved by changing the display type of the sidebar to flex along with specifying the direction of flex items as column. So that we can make the second child element fill the remaining height by setting its flex-grow property to 1.

Finally, we can add the scroll-bar UI when needed by setting the overflow property of that flex item to auto:

.sidebar-left {
  position: fixed;
  width: 300px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scrollable-content-exceeding-height {
  flex: 1;
  overflow: auto;
}

Notice: vendor prefixes omitted due to brevity. Flexbox syntax has been changed multiple times during the time. For better browser compatibility you should add specific vendor prefixes/versions.

body {  margin: 0;}
.sidebar-left {  box-sizing: border-box;  border: 1px solid black;  position: fixed;  width: 300px;  height: 100%;  display: flex;  flex-direction: column;}
.nonscrollable-header {  background-color: yellow;}.scrollable-content-exceeding-height {  background-color: orange;  flex: 1;  overflow: auto;}

<div class="sidebar-left">  <div class="nonscrollable-header">          I want the content in yellow div      always to be visible and not move;      the content in orange should be in a div with a vertical scrollbar<br>      I don't want to specify any absolute heights or margins etc.  </div>  <div class="scrollable-content-exceeding-height">  Here is the content I want to be in scrollable div instead of exceeding the height.  <ul>  <li>here is lots of content which i want to be in a vertical scrollable div</li>  <li>it obiously should not exceed the height of the window</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  <li>here is lots of content</li>  </ul>    </div>  </div>

Put one div next to two vertical divs

Like this maybe?

Note, if you need to support older browsers, this can be done using display: table as well

html, body {  margin: 0;  height: 100%;}.wrapper {  display: flex;  height: 100%;}.wrapper .left,.wrapper .right  {  flex: 1;  display: flex;  flex-direction: column;}.wrapper .right div  {  flex: 1;}.wrapper .right div ~ div  {  flex: 2;}div {  border: 1px solid;  box-sizing: border-box;}

<div class="wrapper">  <div class="left">    Left  </div>  <div class="right">    <div>      Right - Top    </div>    <div>      Right - Bottom    </div>  </div></div>

Aligning two divs vertically

Flexbox does this for a living.

.container {  height: 100px;  display: flex;  flex-direction: column;  outline: 1px red solid;}
.div1 {  flex-grow: 1;  overflow-y: scroll;  width: 340px;}
.div2 {  border-top: 1px blue solid;}

<div class="container">  <div class="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>  <div class="div2">I am div 2.</div></div>

3*30% divs won't vertical center and won't fit in a 100% parent-div

Using a combo of Flexbox and vh units will allow you the CSS to be greatly simplified.

vh units allow us to discard many of the height: 100%; styles, and instead use a single height: 100vh; on the .container_page_2 element.

And Flexbox makes it super simple to vertically align the child element .center-container. We simply add a display: flex; flex-direction: columns; justify-content: center; to the .container_page_2 element.

Note: I have set the height of each row to 30px so the vertical centering is more obvious.

Flexbox can also be used to achieve the red/green split of the elements within each .section.

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {  margin: 0;  padding: 0;  border: 0;  font-size: 100%;  font: inherit;  vertical-align: baseline;}
body,html {  height: 100vh;  overflow: hidden;}
#child-container {  /* exact value is given through JavaScript */  overflow: auto;  scroll-snap-type: both proximity;}
.container_page_2 {  height: 100vh;  background-color: green;  scroll-snap-align: center;  display: flex;  flex-direction: column;  justify-content: center;}
.container_page_2 .section {  height: 30px;  border: 2px solid rgba(0, 0, 0, 0.5);  box-sizing: border-box;}
.section {  display: flex;  margin: 1vh 2vw;}
.section .left-half,.section .right-half {  flex: 1;}
.left-half {  background-color: red;}

<div id="parent-container">  <div id="child-container">    <div class="container_page_2">      <div class="section">        <div class="left-half s1">
        </div>        <div class="right-half s1">
        </div>      </div>      <div class="section">        <div class="left-half s2">
        </div>        <div class="right-half s2">
        </div>      </div>      <div class="section">        <div class="left-half s3">
        </div>        <div class="right-half s3">
        </div>      </div>    </div>  </div></div>

Two Vertical Divs Within a 100% Height Div