Vertically Stretch Div

CSS, Stretching vertically div until it reach the height of its parent

Here is one way of doing it.

Apply the following CSS:

html, body{ height: 100%; margin: 0;}
body{ background-color: #e3e3e3;}

#pagewrapper{
    margin: 0 auto;
    position: relative;
    width: 600px;
    height: 100%;
}
header{ 
    display:block;
    width: 100%;
    height: 100px;
    background: yellow;
}
#contentwrapper{
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 100px;
    left: 0;
    background: blue;
}
#navwrapper{
    width: 100%;
    position: absolute;
    height: 100px;
    bottom: 0px;
    left: 0;
    background: green;
}

Since you specified heights for the header and #navwrapper block elements,
you can use absolute positioning with respect to the parent #pagewrapper block
to set the bottom and top offsets for #contentwrapper and the bottom offset for
#navwrapper.

If you see a scroll bar, you may need to set margin: 0 for either the html and/or body tags.

Demo fiddle: http://jsfiddle.net/audetwebdesign/yUs6r/

CSS stretch div vertically to fill remaining container

Set the parent to flex with #slider set to flex-grow: 1 (or flex: 1 0 0 for short)

section {  position: absolute;  top: 0;  left: 0;  height: 100%;  width: 400px;  background: green;  display: flex;  flex-direction: column;}
#slider {  flex: 1 0 0;}
img {  width: 100%;  height: 100%;  vertical-align: top;}

<section>  <header style="height:40px; background: yellow;">header</header>  <div id="slider">    <img src="http://amanita-design.net/img/home-news/botanicula.jpg" />  </div></section>

How to stretch child div vertically to fill up parent div when parent div height is dynamic

Flexbox can do that.

.container {  background-color: lightgray;  display: flex;  border: 1px solid red;  width: 80%;  margin: 1em auto;}
.blurb {  flex: 1;  padding: 2em;}
.decoration {  display: flex;  align-items: center;  background-color: white;  margin-right: 1em;}

<div class="container">  <div class="blurb">    Lorem ipsum...  </div>  <div class="decoration">    ✓  </div></div>
<div class="container">  <div class="blurb">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae accusantium, magni commodi repellendus quidem facilis doloremque perspiciatis, ab odio omnis deleniti, obcaecati maiores dolores?  </div>  <div class="decoration">    ✓  </div></div>

Stretch div inside a div vertically

Flexbox is quite handy for stuff like this. A great article to read is the complete guide to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.box {  background: lightblue;  width: 200px;  height: 100px;  padding: 10px;  text-align: center;    display: flex;  flex-direction: column;  justify-content: stretch;}
.box_bottom {  background: darkblue;  color: white;  height: 100%;}

<div class="box">  <div class="box_top">    Title  </div>  <div class="box_bottom">    Content  </div></div>

Why is my button stretched vertically when it includes a logo image?

You've set your button as a stretched flex element in a flex row. You can do one of several things to fix it:

Align the row elements to center rather than stretching them. Here, '.self-center` seems to work nicely, though you could do it at the row level also.
Wrap the button in a div. This will make the div the stretched element, and you'll need to center the button vertically with other styles.

Both solutions are shown here.

.bg-darkPink {
  background: pink;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<nav font-am class="m-6 text-xl">
  <div class="flex flex-row justify-between container">
    <div class="flex box-border flex-row">
      <a href="#"><img src="https://via.placeholder.com/80"></a>

      <button class="bg-darkPink hover:underline text-white_disabled font-bold 
                     py-2 px-4 rounded-full self-center">Flex class</button>
    </div>

    <div class="flex box-border flex-row">
      <a href="#"><img src="https://via.placeholder.com/80"></a>

      <div class="flex flex-column items-center">
        <button class="bg-darkPink hover:underline text-white_disabled font-bold 
                       py-2 px-4 rounded-full">Flex div</button>
      </div>
    </div>
  </div>
</nav>