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 #4487 @ 26.01.14 18:40

1.384

Bootstrap har et eksempel på deres hjemmeside - http://getbootstrap.com/examples/sticky-footer/

Bruger #16284 @ 26.01.14 18:45

Jeg har været inde og kigge på den, men den bliver hele tiden i viewpoint, hvilket jeg ikke vil have. Udover det, så får man ikke meget informationer omkring footeren.

Når man kigger i kildekoden og på CSSen, så får man kun at vide hvilken højde den angivende footer har.

Ellers tak for svaret Martin!

Bruger #17081 @ 26.01.14 21:30

1.258

Hvad skal den siger du. For hvis det er som jeg forstår så kan det ikke umiddelbart laves med css, men der skal noget js til

Bruger #16284 @ 26.01.14 21:50

Hvad skal den siger du. For hvis det er som jeg forstår så kan det ikke umiddelbart laves med css, men der skal noget js til

Jeg vil gerne have at footer skal være i bunden af skærmen når der ikke er nok indhold, og når så der kommer indhold på siden, så skal footeren følge med.

http://niluan.dk/footer.png

Bruger #17081 @ 26.01.14 22:22

1.258

Der skal med andre ord noget js til der kan fortælle om placeringen skal være position fixed eller static hvis indholdet er størrer / mindre end skærmstørrelsen

Bruger #16284 @ 26.01.14 22:24

Okay, kender du eventuelt et sted hvor jeg kan få lidt rådgivning til dette? Har nemlig ikke særlig meget erfaring med JavaScript. Eller kan du give et eksempel?

Bruger #4487 @ 27.01.14 00:35

1.384

Hvad skal den siger du. For hvis det er som jeg forstår så kan det ikke umiddelbart laves med css, men der skal noget js til

Jeg vil gerne have at footer skal være i bunden af skærmen når der ikke er nok indhold, og når så der kommer indhold på siden, så skal footeren følge med.

http://niluan.dk/footer.png

Undskyld... men det er jo præcis det som mit eksempel gør... Forstår ikke hvad du ellers mener.

Footeren på bootstraps hjemmeside er synlig i bunden, hvis content ikke er så meget i forhold til skærmen, mens den går ud af skærmens 'view', når content er mere en selve skærmen.

Der er ingen grund til at lege med JavaScript i dette tilfælde.

Bruger #16284 @ 27.01.14 00:37

Jeg kan ikke få Bootstrap til at arbejde på den måde? Jeg har prøvet en masse forskellige måder, og intet vil spille efter min bog. Hvordan gør du?

Bruger #4487 @ 27.01.14 12:05

1.384

I bootstrap har de en div, som fungerer som en container om alt content. Uden for denne div er så vores footer container.

HTML kode

 <!DOCTYPE html>
 <html>
 <head>
     <title>Sticky Footer</title>
 </head>
 <body>
 
     <!-- Wrap all page content here -->
     <div id="wrap">
         <!-- Insert content here -->
     </div>
 
     <div id="footer">
       <!-- Insert Footer content here -->
     </div>
 
 </body>
 </html>

Herefter er der følgende CSS til at style content wrapperen og footeren.

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;
 }

Indlæg senest redigeret d. 27.01.2014 12:08 af Bruger #4487

Bruger #16284 @ 27.01.14 12:14

Så støder vi bare på det problem igen, at footeren skal have en fixed højde, hvilket jeg ikke vil have.

Jeg benytter mig af Joomla, som CMS system, og sætter derfor kode ind i footeren, så det er muligt at placere moduler i den, så derfor skal footeren selv kunne regulere højden efter hvad indholdet er i modulen.

<< < 1 2 > >>

Bootstrap Footer

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler