Kleben Sie die Symbolleiste nach unten

Mein CodeKleben Sie die Symbolleiste nach unten

.bid-toolbar { 
    background:#FFCD2F !important; 
    height:70px !important; 
    position: fixed; 
    bottom: 0;

Ich mag den gelben Symbolleiste Stick auf den Boden machen. Ich habe ein paar Mal versucht, diese Symbolleiste auf den Boden zu machen, aber wenn ich es

fixed

, es geht nach oben, wie ich die Seite nach unten scrollen, wie Sie unten im Bild sehen können.

Quelle

2016-07-18 Ben Sc

versuchen hinzufügen wichtig oder einfach Link zu Ihrer Seite –

! Wichtig für die Position meinst du das? –

hinzugefügt! Wichtig, hat nichts geändert ... –

Statt position:fixed machen es absolute Eigenschaft Position wie

position:absolute;

Quelle

2016-07-18 06:55:27

Es ist immer noch das gleiche;) –

ok machen unten: 0px nicht 0.ok überprüfen Sie es und lassen Sie mich wissen –

Es ist immer noch das gleiche wie ich 0px .. –

Mit position: fixed verursacht häufig Probleme in mobilen Browsern. Sie können display:flex in Kombination mit overflow:auto verwenden eine feste Fußzeile zu erhalten, ohne festes postioning mit:

<!DOCTYPE HTML> 
<html> 
<head> 
    <style type="text/css"> 
     html, body { 
      height: 100%; 
      margin: 0pt; 
     } 
     .Frame { 
      display: flex; 
      flex-direction: column; 
      height: 100%; 
      width: 100%; 
     } 
     .Row { 
      flex: 0 0 auto; 
     } 
     .Row.Expand { 
      overflow: auto; 
      flex: 1 1 auto; 
     } 
    </style> 
</head> 
<body> 
    <div class="Frame"> 
     <div class="Row Expand"><h2>Awesome content</h2></div> 
     <div class="Row"><h3>Sticky footer</h3></div> 
    </div> 
</body> 
</html>

Ein Arbeitsbeispiel: https://jsfiddle.net/9L2reymy/2/

Dies ist die ursprüngliche Antwort, die die Fußzeile versteckt, wenn die Inhalt ist größer als die Bildschirmhöhe:

Ich schrieb an article in my blog about fixed footers und implementierte sie mit display:table stattdessen. Hier ist der relevante Code in einem einfachen Beispiel:

<!DOCTYPE HTML> 
<html> 
<head> 
    <style type="text/css"> 
     html, body { 
      height: 100%; 
      margin: 0pt; 
     } 
     .Frame { 
      display: table; 
      height: 100%; 
      width: 100%; 
     } 
     .Row { 
      display: table-row; 
      height: 1px; 
     } 
     .Row.Expand { 
      height: auto; 
     } 
    </style> 
</head> 
<body> 
    <div class="Frame"> 
     <div class="Row Expand"><h2>Awesome content</h2></div> 
     <div class="Row"><h3>Sticky footer</h3></div> 
    </div> 
</body> 
</html>

Quelle

2016-07-18 07:01:46 Torben

Lesen .......... –

position:absoulute; left:0px; bottom:0px; z-index:999;

Quelle

2016-07-18 07:11:38

getan, es ist das gleiche ... –

legen Sie die div (Gebot-Symbolleiste) am unteren Rand der Seite. nach "beschädigten Fotos", wenn es das letzte div ist –

alle Codes nachschlagen ... –

können Sie jQuery verwenden die Bid-Symbolleiste unten zu halten versuchen, die diesen Code und bemerke ich eine ID verwendet #bid_toolBar Sie es in die Klasse ändern können, wenn Sie möchte.

$(document).ready(function() { 

     var bid_toolBarHeight = 0, 
      bid_toolBarTop = 0, 
      $bid_toolBar = $("#bid_toolBar"); 

     positionbid_toolBar(); 

     function positionbid_toolBar() { 

       bid_toolBarHeight = $bid_toolBar.height(); 
       bid_toolBarTop = ($(window).scrollTop()+$(window).height()-bid_toolBarHeight)+"px"; 

       if (($(document.body).height()+bid_toolBarHeight) < $(window).height()) { 
        $bid_toolBar.css({ 
         position: "absolute" 
        }).animate({ 
         top: bid_toolBarTop 
        }) 
       } else { 
        $bid_toolBar.css({ 
         position: "static" 
        }) 
       } 

     } 

     $(window) 
       .scroll(positionbid_toolBar) 
       .resize(positionbid_toolBar) 

});

Quelle

2016-07-18 07:17:02 Terabyte

Ich habe nicht wirklich bekommen, .. –

versucht diesen Code ... –

Welcher Teil Sie nicht bekommen Ben – Terabyte

Sie können das Hinzufügen versuchen:

-webkit-transform: translateZ(0);

Oder das war eigentlich nur das Gerät/Browser-Probleme.

Quelle

2016-07-18 07:48:00 divz

Ich benutze Intel XDK ... nicht sicher, ob es der Fall cus ist Ich habe ein paar Methoden ausprobiert ... und getestet auf dem Emulator –

Nicht sicher über Intel XDK. Wahrscheinlich könnte das helfen> [link] (https://software.intel.com/en-us/forums/intel-xdk/topic/621742) – divz

Danke, das ist nützlich –

Kleben Sie die Symbolleiste nach unten

Antwort

Verwandte Themen