Šta je novo?

Fiksiranje div-a za dno stranice

Logen

Slavan
Učlanjen(a)
20.12.2009
Poruke
1,667
Poena
225
Moja oprema  
Laptop
Macbook Air M1
Mobilni telefon
iPhone 14 Pro
Pristup internetu
  1. Optički internet
Mucim se sa ovim vec par dana pa rekoh da pitam mudre ljude.

Treba da napravim stranu koja je podeljena na dve kolone i svaka kolona ima div (sa slikama i tekstom) koji je zalepljen za vrh, div na sredini i div zalepljen za dno strane. To treba da bude responsive pa koristim bootstrap. Ovo je neki kod koji imam

Kod:
<div class="container-fluid">
    <div class="row">
      <div class="col-sm-3">
         <div></div>
         <div></div>
         <div></div>
      </div>
      <div class="col-sm">
          <div></div>
         <div></div>
         <div></div>
      </div>
    </div>
  </div>

Ovo je neka ogoljena verzija, bez nekih mojis CSS podesavanja i bez nepotrebnih elemenata. Prvi i drugi div mogu da namestim, dok ovaj za dno ne ispada dobro za sve rezolucije. Ako probam sa .fixed-bottom ispada iz grida i ne mogu da ga vratim.

Kako da ovo izvedem?
 
Šta misliš o flexboxu? Ja ga koristim za većinu stvari koje radim i nema mu konkurencije. Napisao sam brzinski nešto, ako sam te najbolje razumio to bi trebalo da je nešto ovako:

https://jsfiddle.net/vo409ced/2/
 
Trebalo bi da bude bootstap. Sad sam na telefonu ali pogledacu sutra ovo sto si postavio. Hvala.


Sent from my iPhone using Tapatalk
 
Nije bootstrap, ali je i bolje jer koristi samo html/css bez eksternih biblioteka.

Ako ti bude odgovaralo rješenje provjeri samo pored toga kako da flexbox prilagodiš starijim browserima kao što je IE 10 i stariji. Na ostalima radi bez problema.
 
Poslednja izmena:
Drugi nacin je da koristis calc:

HTML:
<div class="glavni">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

Kod:
.glavni {
  min-height: 100vh;
}

.header {
  height: 150px;
}

.footer {
  height: 100px;
}

.content {
  min-height: calc(100vh - 150px - 100px);
}
 
@mrtavker
Nisam stigo da probam ovo. Javicu kasnije da li je to to.
Cini mi se da bih mogao da izvedem sa calc i visinom viewporta.

@vsakos
Mislim da ovako mogu nesto ovako da uradim. Hvala.

Javicu kasnije/sutra sta sam uradio.
 
Nazad
Vrh Dno