Gå til innhold

box height %100, ned til footer


Anbefalte innlegg

Jeg har en side med fixed footer på bunnen av siden. det jeg vil ha er at box2 og box4 når helt ned til footeren og ikke lenger.

NB: Hvis dere har helt andre løsninger på dette problemet er det bare å poste dem. f.eks rewrite av footer osv.

 

 

Her er link til problemet: http://jsfiddle.net/DqYn4/

 

HTML delen

<body>
	<div class="span6">
		<div class="box">Box1<br>Box1<br>Box1<br>Box1<br>Box1<br></div>
		<div class="box2">Box2</div>
	</div>
	
	<div class="span6">
		<div class="box3">Box3</div>
		<div class="box4">Box4</div>
	</div>
	    <div id="footer">
      <div class="container">
        <p class="text-muted">test.</p>
      </div>
    </div>
</body>

CSS- delen

 

html {
  position: relative;
height: 95%;
}
body {
height:95%;
margin-bottom: 60px;
}
#footer {
  position:absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: rgb(47, 67, 84);
}
#footer > .container > .text-muted{
padding-top:20px;
color:#FFF;
margin-top:0px;
}
.span6 {
float:left;
height:100%;
}
.box2 {
border:1px solid;
clear:both;
height:100%;
}
.box4 {
border:1px solid;
clear:both;
height:100%;
}

 

Lenke til kommentar
Videoannonse
Annonse

Hva vil du at skal skje når box2 og 4 inneholder så mye tekst at teksten når lenger enn footeren?

da skal footeren følge med. den skal alltid være under box2 og 4

 

 

beklager språket jeg bruker. føler noen ganger at jeg bruker et annet språk når jeg forklarer ting

Endret av jeIIy
Lenke til kommentar

Jeg vet ikke, men et generelt tips er å sette bakgrunnsfargen (eller border) på alt av diver for da ser du i det minste hva du holder på med.

 

Hvis du vil ha footeren på bunnen av skjermen i utgangspunktet, men flyttes "under" bunnen av skjermen når box2 er full av tekst som er lengre enn skjermen er det min intuisjon at du må bruke javascript.

Endret av Tåkelur
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...