Wątek przeniesiony 2015-08-26 13:37 z Webmastering przez dzek69.

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

0

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.

0

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

0

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

0

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>
0

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

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0