Putting Fußzeile an der Unterseite

Ich mache gerade eine App. Meine Fußzeile befindet sich jedoch direkt unter dem Knopf. Ich möchte, dass meine Fußzeile am unteren Rand der App angezeigt wird. Ich werde einen Link an das Bild anbringen, wie es gerade aussieht.Putting Fußzeile an der Unterseite

<body> 
    <div data-role="page" id="mainpage"> 
     <div data-role="header" class="header" data-position="fixed"> 
      <a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a> 
      <h1><b>Converter App</b></h1> 
     </div> 

     <div class="app"> 
      <a href="converter.html" class="ui-btn">Converter</a> 
     </div> 


     <footer data-role="footer"> 
      <h4>Copyright 2017</h4> 
     </footer> 
    </div> 
    <script type="text/javascript" src="cordova.js"></script> 
    <script type="text/javascript" src="scripts/platformOverrides.js"></script> 
    <script type="text/javascript" src="scripts/index.js"></script> 
</body>

Ich habe die CSS unten wie gewünscht hinzugefügt.

.ui-header-fixed, 
.ui-footer-fixed { 
    left: 0; 
    right: 0; 
    width: 100%; 
    position: fixed; 
    z-index: 1000; 
}

https://imgur.com/a/ECjxq

Quelle

2017-11-16 yxlxn

Könnten Sie hinzufügen lassen Sie uns wissen, welche CSS/JS haben Sie benutzt und was Sie versucht, dies zu erreichen, ? – 3Dos

@ 3Dos Hallo !! Ich habe in der CSS hinzugefügt. – yxlxn

hinzufügen CSS-Klasse oder id

#footer { 
    position: fixed; 
    left: 0; 
    bottom: 0; 
}

In html

<div id="footer"> 
    <h4>Copyright 2017</h4> 
</div>

explicity reparieren Ihren Fuß-Container am unteren Rand der Seite

https://jsfiddle.net/5qj7eggm/

Quelle

2017-11-16 13:10:57

Hallo !! Leider befindet sich die Fußzeile immer noch direkt unter dem Button. – yxlxn

https://jsfiddle.net/5qj7eggm/ Kann es sein, dass Sie vergessen haben, id in Ihrem HTML anzugeben? –

Nur so nebenbei (möglicherweise kein Problem), aber das wird dazu führen, dass Ihre Fußzeile aufgrund ihrer festen Position immer unten angezeigt wird https://jsfiddle.net/5qj7eggm/1/, und so wird es immer sein sichtbar unabhängig von der Höhe des Seiteninhalts. Möglicherweise kein Problem, abhängig von der App wird am Ende aussehen wie. – MLeFevre

Was Sie wollen, ist zunächst eine Mindesthöhe des App Container angeben wie body, #main-page { min-height: 100vh; }

dann kleben die Fußzeile in der unteren

body, #mainpage { 
 
    min-height: 100vh; 
 
    position: relative; 
 
} 
 

 
.ui-header-fixed, 
 
.ui-footer-fixed { 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    position: fixed; 
 
    z-index: 1000; 
 
} 
 

 
.ui-footer-fixed { 
 
    bottom: 0; 
 
}

<div data-role="page" id="mainpage"> 
 
    <div data-role="header" class="header" data-position="fixed"> 
 
    <a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a> 
 
    <h1><b>Converter App</b></h1> 
 
    </div> 
 

 
    <div class="app"> 
 
    <a href="converter.html" class="ui-btn">Converter</a> 
 
    </div> 
 

 

 
    <footer data-role="footer" class="ui-footer-fixed"> 
 
    <h4>Copyright 2017</h4> 
 
    </footer> 
 
</div>

Sie auch möchten um die HTML-Struktur leicht zu verändern, um Ihre Fußzeile immer sichtbar zu machen.

Quelle

2017-11-16 13:25:38 3Dos

Mit

footer { 
    position: fixed; 
    left: 0; 
    bottom: 0; 
}

benötigen Sie

#mainpage{ 
height:100vh;}

.ui-header-fixed, 
 
.ui-footer-fixed { 
 
left: 0; 
 
right: 0; 
 
width: 100%; 
 
position: fixed; 
 
z-index: 1000; 
 
} 
 
footer { 
 
    position: fixed; 
 
    left: 0; 
 
    bottom: 0; 
 
} 
 
#mainpage{ 
 
height:100vh;}

<div data-role="page" id="mainpage"> 
 
     <div data-role="header" class="header" data-position="fixed"> 
 
      <a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a> 
 
      <h1><b>Converter App</b></h1> 
 
     </div> 
 

 
     <div class="app"> 
 
      <a href="converter.html" class="ui-btn">Converter</a> 
 
     </div> 
 

 

 
     <footer data-role="footer"> 
 
      <h4>Copyright 2017</h4> 
 
     </footer> 
 
    </div> 
 

 

 

 
    <script type="text/javascript" src="cordova.js"></script> 
 
    <script type="text/javascript" src="scripts/platformOverrides.js"></script> 
 
    <script type="text/javascript" src="scripts/index.js"></script>

Quelle

2017-11-16 13:26:44 Gattbha

Putting Fußzeile an der Unterseite

Antwort

Verwandte Themen