2016-04-24 20 views
0

Ich habe mich nur gefragt, können wir eine klebrige Fußzeile mit Kommentarbox wie WhatsApp auf unserer Website hinzufügen. Und um den Kommentar auf derselben Seite anzuzeigen. Gibt es einen Weg dazu?Sticky Footer mit Kommentarbox wie WhatsApp

Hier ist mein HTML-Code

<!DOCTYPE html> <html lang="en-US"> 

<head>  <link rel="stylesheet" href="main.css" type="text/css" /> 
    <title>ChatRoom</title>  </head> 

<body>  <div id="navigation">  <a href="#">test</a> </div> 


    </body> 
</html> 

Hier ist die CSS von meiner Seite

body { 
    padding: 0; 
    margin: 0; 
    font-family: Lucida Grande, Helvetica, Arial, sans-serif; 
    font-size: 12px; 
} 

#navigation { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    color: #ffffff; 
    height: 10%; 
    text-align: center; 
    padding-top: 15px; 
    /* Adds shadow to the bottom of the bar */ 
    -webkit-box-shadow: 0px 0px 8px 0px #000000; 
    -moz-box-shadow: 0px 0px 8px 0px #000000; 
    box-shadow: 0px 0px 8px 0px #000000; 
    /* Adds the transparent background */ 
    background-color: rgba(60, 179, 113, 1.0); 
    color: rgba(60, 179, 113, 1.0); 
} 

#navigation a { 
    font-size: 40px; 
    padding-left: 15px; 
    padding-right: 15px; 
    color: white; 
    text-decoration: none; 
} 

#content { 
    width: 600px; 
    padding-top: 70px; 
    padding-bottom: 30px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#content img { 
    padding-top: 20px; 
    padding-bottom: 30px; 
} 

jemand mir bitte dabei helfen kann?

Antwort

0

Nein, wenn das alles ist, was Sie haben, gibt es keine Möglichkeit, dies zu tun.

Sie benötigen Serverlogik, um Ihre Aufgabe zu erfüllen.

1

Ja sicher, dass Sie das tun können. Für den Sticky Footer ist der Trick, die Fußzeile absolute zu positionieren und bottom:0 zu tun, damit die Fußzeile in Bezug auf den Container unten bleibt. Außerdem müssten Sie eine JavaScript-Logik schreiben, um die Kommentare zu bearbeiten.

Hier ist eine grobe JSFiddle Implementierung für das Beispiel. Wenn Sie Fragen haben, fragen Sie. Hoffe das hilft!