html - Hvordan får jeg min div til at blive i bunden? - Udvikleren.dk

Tags: html css

<< < 1 2 > >>

Bruger #17259 @ 12.06.12 17:23

Hej allesammen

Jeg kunne godt tænke mig høre om der er nogen der ved hvordan man får en div til at blive i bunden af skærmen UDEN brug af procent på højden.

Her er min html.

HTML kode

 <html>
     <head>
     <LINK REL=StyleSheet HREF="style.css" TYPE="text/css"/>
         <title>testsite</title>
     </head>
     <body>
     <div id="container">
        <div id="headerbox">
         
        </div>
         <div id="middlebox">
             
         </div>
     </div>
         <div id="footerbox">
             
         </div>
     </body>
     
 </html>

Her er min CSS

CSS kode

 html, body{
     margin:0px auto;
     padding:0px;
     
     
 }
 
 #headerbox{
     background:#000000 url("images/headerbg.jpg") center no-repeat;
     height: 107px;
     margin:0px auto;
     padding:0px;
     
 }
 
 #middlebox{
     padding-bottom: 107px;
     
 }
 
 #footerbox{
     background:#000000 url("images/headerbg.jpg") center no-repeat;
     height: 107px;
     margin:0px auto;
     position: relative;
     margin-top:-107px;
     
 }
 
 #container{
     position:relative;
      min-height:100%;
      _height:100%;
     
 }

16 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 7 karma

Sorter efter stemmer Sorter efter dato

Bruger #15754 @ 12.06.12 20:48

989

CSS kode

 #footerbox{
      background:#000 url("images/headerbg.jpg") center no-repeat;
      height: 107px;
      width:100%;
      position:absolute;
      bottom:0;
 }

JSFiddle eksempel - i din footer kan du så placere dit indhold mm.

Side note så er der ikke noget som hedder float:end; specifikationen fra W3 kan læses her

Indlæg senest redigeret d. 12.06.2012 20:52 af Bruger #15754

Bruger #17259 @ 12.06.12 21:03

Tak for svarene,

CSS kode

 position:absolute;bottom:0;

denne CSS virkede!

Bruger #17072 @ 12.06.12 17:27

152

Prøv at skrive float: end; på din #footerbox. Så skulle den gerne blive placeret nederst.

Bruger #4487 @ 12.06.12 17:55

1.384

Er der virkelig noget der hedder end som værdi til float?

Bruger #17259 @ 12.06.12 18:04

Prøv at skrive float: end; på din #footerbox. Så skulle den gerne blive placeret nederst.

Det virkede ikke, hvis det da skal sættes sådan her op..

Her er min CSS

CSS kode

 html, body{
     margin:0px auto;
     padding:0px;
     
     
 }
 
 #headerbox{
     background:#000000 url("images/headerbg.jpg") center no-repeat;
     height: 107px;
     margin:0px auto;
     padding:0px;
     
 }
 
 #middlebox{
     padding-bottom:107px;
     
 }
 
 
 
 #footerbox{
     background:#000000 url("images/headerbg.jpg") center no-repeat;
     height: 107px;
     margin:0px auto;
     float:end;
     position:relative;
     margin-bottom:-107px; 
     
 }
 
 #container {
      position:relative;
      
 }

Bruger #4487 @ 12.06.12 18:05

1.384

Prøv evt. at kigge på denne side, måske det virker - http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

Bruger #17072 @ 12.06.12 19:14

152

Er der virkelig noget der hedder end som værdi til float?

Ja ifølge Adobe Dreamweaver CS5, så er der noget der hedder float: end;

Bruger #17260 @ 12.06.12 20:54

108

Det er let muligt at omgå brugen af JS for dette. Dog vil jeg gerne vide om det skal være helt i bunden, eller bare bunden af "vinduet" ?

Bruger #15754 @ 12.06.12 20:58

989

^ Ja det er faktisk en vigtig detalje, hvad er det du ønsker? Min løsning placere bare din footer fast i bunden i af skærmen som kan gå galt hvis dit indhold er højere end skærmen. Se her.

Bruger #17260 @ 12.06.12 21:02

108

@Jan På http://prohmedesigns.com/ har jeg lavet en lignende footer - den forbliver bare i bunden, ligegyldigt hvad. Uden JS

<< < 1 2 > >>

Hvordan får jeg min div til at blive i bunden?

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler