html - Bootstrap Footer - Udvikleren.dk - Programmering, webdesign og grafik

Tags: bootstrap3 html css div

<< < 1 2 > >>

Bruger #16284 @ 26.01.14 12:13

Hej Udvikleren.

Jeg er ved at arbejde på en hjemmeside, som bliver udarbejdet i Bootstrap 3. Hjemmesiden skal have en footer, som hele tiden befinder sig nederst på siden, og som automatisk bliver skubbet hvis indholdet i content fylder mere.

Jeg har prøvet at give min footer en fixed height, og givet min body en margin-bottom på samme mængde, men da min footer skal ændre højde efter hvor meget indhold der er i den, er dette ikke en løsning.

Jeg har søgt Google tynd, og har prøvet et hav af muligheder, men uden held. Håber at der sidder et klogt hoved der eventuelt har haft samme problem, eller bare kan hjælpe!

På forhånd mange tak for hjælpen.

HTML kode

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <title>TEST</title>
 
 <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
 <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css">
 <link rel="stylesheet" type="text/css" href="css/style.css">
 
 </head>
 
 <body>
 
     <!-- Header begins-->
     <header class="header">
     
         <div class="container">
         
             Header
         
         </div>
     
     </header>
     <!--Header ends -->
     
     <!-- Nav begins -->
     <nav class="nav">
     
         <div class="container">
 
             Navigation
 
         </div>
     
     </nav>
     <!-- Nav ends -->
     
     <!-- Slideshow begins -->
     <div class="slideshow">
     
         <div class="container">
         
             Slideshow
             
         </div>
     
     </div>
     <!-- Slideshow ends -->
     
     <!-- Content begins -->
     <div class="content">
     
         <div class="container">
         
             <div class="col-lg-3 col-md-6">
                 <div class="thumbnail">
                     <img src="http://placehold.it/800x500" alt="">
                     <div class="caption">
                         <h3>Service</h3>
                         <p>Beskrivelse af et produkt</p>
                         <p><a href="#" class="btn btn-primary">Læs mere</a>
                         </p>
                     </div>
                 </div>
             </div>
             
             <div class="col-lg-3 col-md-6">
                 <div class="thumbnail">
                     <img src="http://placehold.it/800x500" alt="">
                     <div class="caption">
                         <h3>Service</h3>
                         <p>Beskrivelse af et produkt</p>
                         <p><a href="#" class="btn btn-primary">Læs mere</a>
                         </p>
                     </div>
                 </div>
             </div>
             
             <div class="col-lg-3 col-md-6">
                 <div class="thumbnail">
                     <img src="http://placehold.it/800x500" alt="">
                     <div class="caption">
                         <h3>Service</h3>
                         <p>Beskrivelse af et produkt</p>
                         <p><a href="#" class="btn btn-primary">Læs mere</a>
                         </p>
                     </div>
                 </div>
             </div>
             
             <div class="col-lg-3 col-md-6">
                 <div class="thumbnail">
                     <img src="http://placehold.it/800x500" alt="">
                     <div class="caption">
                         <h3>Service</h3>
                         <p>Beskrivelse af et produkt</p>
                         <p><a href="#" class="btn btn-primary">Læs mere</a>
                         </p>
                     </div>
                 </div>
             </div>
         
         </div>
     
     </div>
     <!-- Content ends -->
     
     <!-- Footer begins -->
     <footer class="footer">
     
         <div class="container">
         
             <div class="col-md-3">
             
                 Velkommen til TEST's hjemmeside, håber at du finder de informationer du er på udkig efter. Ellers er du altid velkommen til at ringe på telefon nr: ** ** ** **
                 
             </div>
             
             <div class="col-md-3">
             
                 Footer
                 
             </div>
             
             <div class="col-md-3">
             
                 Footer
                 
             </div>
             
             <div class="col-md-3">
             
                 Footer
                 
             </div>
             
         </div>
     
     </footer>
     <!-- Footer ends -->
 
 </body>
 
 <script src="js/bootstrap.js"></script>
 
 </html>

CSS kode

 /********************
     HTML
 ********************/
 
 html {
     height:100%;
 }
 
 /********************
     Body
 ********************/
 
 body {
     height:100%;
 }
 
 /********************
     Header
 ********************/
 
 .header {
     background-color:#494949;
     width:100%;
 }
 
 /********************
     Navigation
 ********************/
 
 .nav {
     background-color:#6A4444;
     width:100%;
 }
 
 /********************
     Slideshow
 ********************/
 
 .slideshow {
     background-color:#969696;
     width:100%;
     margin-bottom:30px;
 }
 
 /********************
     Content
 ********************/
 
 .content {
     height: auto !important;
     height:100%;
     min-height:100%;
 }
 
 /********************
     Footer
 ********************/
 
 .footer {
     width:100%;
     padding-top:15px;
     padding-bottom:15px;
     background-color:#494949;
     margin-top:15px;
 }
 
 /********************
     Misc
 ********************/
 
 
 /********************
     Typography
 ********************

15 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #15663 @ 27.01.14 13:27

415

Kan du ikke bare bruge min-height Nikolaj?

Bruger #16284 @ 27.01.14 13:31

Kan du ikke bare bruge min-height Nikolaj?

CSS kode

 /* Sticky footer styles
     -------------------------------------------------- */
     html,
     body {
     height: 100%;
     /* The html and body elements cannot have any padding or margin. */
     }
     /* Wrapper for page content to push down footer */
     #wrap {
     min-height: 100%;
     height: auto;
     /* Negative indent footer by its height */
     margin: 0 auto -60px;
     /* Pad bottom by footer height */
     padding: 0 0 60px;
     }
     /* Set the fixed height of the footer here */
     #footer {
     height: 60px;
     background-color: #f5f5f5;
     }

Ikke når padding skal passe med footer's højde. Desværre

Efter at Dan tidligere skrev at der skulle JS til, så søgte jeg lidt på nettet og læste mig frem til at han godt kunne have ret. Men da jeg ingen erfaring har med JS, så håber jeg at han måske kan give mit et eksempel, eller hjælpe mig med at lave det.

Bruger #15663 @ 27.01.14 14:32

415

Du burde vel kunne tricke den lidt med at lave følgende:

CSS kode

 #wrap {
 min-padding: 0 0 60px;
 }
 
 #footer {
 min-height: 60px;
 }

Bruger #7728 @ 27.01.14 18:08

243

Prøv at brug klassen navbar-fixed-bottom, skulle løse dit problem..

Bruger #16284 @ 27.01.14 22:37

Du burde vel kunne tricke den lidt med at lave følgende:
CSS kode
 #wrap {
 min-padding: 0 0 60px;
 }
 
 #footer {
 min-height: 60px;
 }

Det kunne være en mulighed. Den vil jeg lige afprøve senere.

Edit: Sad og tænkte over muligheden, og det vil ikke gå. For hvis footeren bliver højere, så vil padding blive for lille

Prøv at brug klassen navbar-fixed-bottom, skulle løse dit problem..

Det er desværre ikke en mulighed, da den altid vil være inde i viewpoint, hvilket jeg ikke vil have.

Indlæg senest redigeret d. 27.01.2014 22:49 af Bruger #16284

<< < 1 2 > >>

Bootstrap Footer

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler