Div mający 100% pozostałej wysokości.

Tak jak w temacie. Sytuacja ma się następująco

<div style="height:300px; width:100%; clear:both;"></div>
<div class="drugi"></div>

Przechodząc do meritum, jak zrobić by drugi div dopasował się do dolnej części ekranu? Cały problem polega na tym że div tworzy się na 100%, ale narzucając wysokosc tego poprzedniego.

Chcesz otrzymać 1xdiv o wysokości 300, a drugi wypełniający pozostałą wysokość tak?

Chodzi o coś takiego?
HTML

<div class="pierwszy">Pierwszy</div>
<div class="drugi">Drugi</div>

CSS

*{
  margin: 0;
  padding: 0;
}

body{
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.pierwszy{
  background-color: red;
  height: 300px;
}

.drugi{
  background-color: aqua;
  height: 100vh;
}

Na chwilę obecną to taka trochę sztuka dla sztuki, bo - wg Caniuse - jednostki vh są u nas wspierane w około 87%. Niemniej da się ;) Jeżeli nie to trzeba zagonić JS do roboty

Coś kurcze nie idzie, zrobiłem tak ; /

<div style="height:100%">
	<div style="width:100%; height:300px;background:green; clear:both; "></div>

	<div style="height:100%; width:100%;background:orange;"></div>
</div>

Można też z calc - chyba najlepsze wsparcie porównując do jednostek vh i flexa, w łatwy sposób też możemy zmienić przewijanie całości do formy przyklejonego headera

http://jsbin.com/jivepipihu/2/edit?html,css,output