كيف الفيسبوك حفاظ على هذا شريط الأدوات في الجزء السفلي من الصفحة؟

StackOverflow https://stackoverflow.com/questions/1214929

  •  06-07-2019
  •  | 
  •  

سؤال

وأنا أحب الطريقة الفيسبوك يبقي أن شريط الأدوات في أسفل الصفحة.

هل تتطلب عبر متصفح مهارات النينجا؟

جافا سكريبت / <لأ href = "http://en.wikipedia.org / ويكي / Cascading_Style_Sheets "يختلط =" نوفولو noreferrer "> CSS ملفات ضخمة حتى أواجه صعوبة في تضييق التنفيذ (لأغراض التعلم).

هل كانت مفيدة؟

المحلول

ويمكنك تحقيق التأثير مع CSS .

نصائح أخرى

وإليك مثال الأساسي. لا، أنها لا تتطلب عبر متصفح النينجا مهاره. =) 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Facebook Bar</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#page {
margin: 10px;
overflow: auto;
height: 93%;
}
#bottom {
width: 100%;
background: #18f8f8;
text-align: center;
}
</style>
</head>
<body>
<div id="page">
    Other stuff on page
</div>
<div id="bottom">Bottom stuff goes here</div>
</body>
</html>

والأفضل هو لتثبيت الحرائق ونرى كيف فعلوا ذلك. عندما أرى أشياء مثيرة للاهتمام على شبكة الإنترنت، الحرائق هو أفضل وسيلة لتحليل انها بنية HTML، CSS المرفقة ويمكنك تعديل حتى مباشرة بنية CSS / HTML لنرى كيف يتغير. كل ما تراه على موقع على شبكة الانترنت يمكن قراءتها بكل بساطة. تذكر، ومصدر (HTML، CSS، وجافا سكريبت) يحصل على تسليمها معها:)

وهذا الحل لا يعمل بشكل جيد للصفحات التي تحتوي على محتوى تتجاوز الجزء السفلي من نافذة المتصفح.

وحاول شيئا من هذا القبيل بدلا من ذلك: 

<div style="display: block;
position: fixed;
text-align: center;
    z-index:1000;
bottom: 0;
left: 0;
width: 100%;
color: #999999;
clear: both;
height: 15px;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #b5b6b5;
background-repeat: repeat-x;
border-right-style: solid;
border-left-style: solid;
border-right-width: 1px;
border-left-width: 1px;
border-right-color: #b5b6b5;
border-left-color: #b5b6b5;
background-color: #e7e7e7;"></div>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top