كيف يمكنني جعل التذييل العائم يلتصق بأسفل إطار العرض في IE 6؟
https://stackoverflow.com/questions/146659
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أعلم أن هذا سيكون سهلاً مع الموضع: ثابت، ولكن لسوء الحظ أنا عالق في دعم IE 6.كيف يمكنني أن أفعل هذا؟أفضّل استخدام CSS لأكون نظيفًا، ولكن إذا اضطررت إلى استخدام Javascript، فهذه ليست نهاية العالم.في تطبيقي الحالي، لدي "تذييل عائم" يطفو فوق منطقة المحتوى الرئيسية ويتم وضعه باستخدام Javascript.التنفيذ الذي أستخدمه حاليًا ليس أنيقًا بشكل خاص حتى مع Javascript، لذا فإن أسئلتي هي:
- هل هناك طريقة للقيام بذلك دون جافا سكريبت؟
- إذا كان لا بد لي من استخدام جافا سكريبت، فهل هناك أي حلول "لطيفة" لمشكلة التذييل العائم هذه؟بكلمة "لطيف" أعني شيئًا سيعمل عبر المتصفحات، ولا يزيد من التحميل على موارد المتصفح (حيث سيتعين عليه إعادة الحساب كثيرًا)، ويكون أنيقًا/سهل الاستخدام (أي.سيكون من الجميل أن أكتب شيئا من هذا القبيل
new FloatingFooter("floatingDiv")).
سأخمن أنه لا يوجد حل سهل للغاية يحتوي على كل ما سبق، ولكن شيئًا يمكنني البناء عليه سيكون رائعًا.
وأخيرا، مجرد سؤال أكثر عمومية.أعلم أن هذه المشكلة تمثل صعوبة كبيرة في حلها، فما هي بدائل واجهة المستخدم الأخرى بدلاً من وجود محتوى التذييل في أسفل كل صفحة؟على موقعي الخاص، أستخدمه لإظهار التحولات بين الخطوات.هل هناك طرق أخرى يمكنني القيام بذلك؟
المحلول
هذا قد يعمل من أجلك.إنه يعمل على IE6 وFirefox 2.0.0.17 بالنسبة لي.أعطها فرصة.لقد جعلت ارتفاع التذييل طويلًا جدًا، فقط من أجل التأثير.من الواضح أنك ستغيره إلى ما تحتاجه.آمل أن يكون هذا يصلح لك.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Liquid Footer</title>
<style type="text/css">
.footer {
background-color: #cdcdcd;
height: 180px;
text-align: center;
font-size:10px;
color:#CC0000;
font-family:Verdana;
padding-top: 10px;
width: 100%;
position:fixed;
left: 0px;
bottom: 0px;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
body {height:100%; overflow-y:auto;}
html {overflow-x:auto; overflow-y:hidden;}
* html .footer {position:absolute;}
</style>
<![endif]-->
</head>
<body>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
<div class="footer">-- This is your liquid footer --</div>
</body>
</html>
نصائح أخرى
إذا كنت لا تريد استخدام التعليقات الشرطية، حتى تتمكن من وضع ملف CSS في ملف منفصل، فاستخدم !important.شيء من هذا القبيل:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
html {
overflow-x: auto;
overflow-y: scroll !important;
overflow-y: hidden; /* ie6 value b/c !important ignored */
}
body {
padding:0;
margin:0;
height: 100%;
overflow-y: hidden !important;
overflow-y: scroll; /* ie6 value b/c !important ignored */
}
#bottom {
background-color:#ddd;
position: fixed !important;
position: absolute; /* ie6 value b/c !important ignored */
width: 100%;
bottom: 0px;
z-index: 5;
height:100px;
}
#content {
font-size: 50px;
}
</style>
</head>
<body>
<div id="bottom">
keep this text in the viewport at all times
</div>
<div id="content">
Let's create enough content to force scroll bar to appear.
Then we can ensure this works when content overflows.
One quick way to do this is to give this text a large font
and throw on some extra line breaks.
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</body>
</html>
لقد فعلت ذلك باستخدام تعبيرات CSS في الماضي.
جرب شيئًا مثل هذا:
.footer {
position: absolute;
top: expression((document.body.clientHeight - myFooterheight) + "px");
}
$(function(){
positionFooter();
function positionFooter(){
if($(document).height() < $(window).height()){//Without the body height conditional the footer will always stick to the bottom of the window, regardless of the body height, $(document).height() - could be main container/wrapper like $("#main").height() it depend on your code
$("#footer").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#footer").height())+"px"})
}
}
$(window).scroll(positionFooter);
$(window).resize(positionFooter);
});
إذا وضعت height ل 100% و overflow: auto إلى <html/> و <body/> العلامات، أي شيء له الموضع المطلق سوف يصبح ثابتًا.إنه أبسط شيء غير تقليدي إلى حد ما مع أشرطة التمرير الموضوعة بشكل غريب ولكن يمكن تعديلها للحصول على نتائج جيدة.مثال
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
html, body
{
height: 100%;
overflow: auto;
}
.fixed
{
position: absolute;
bottom: 0px;
height: 40px;
background: blue;
width: 100%;
}
</style>
</head>
<body>
<div class="fixed"></div>
overflow....<br />
overflow....<br />
overflow....<br />
overflow....<br />
overflow....<br />
overflow....<br />
overflow....<br />
overflow....<br />
overflow....<br /><!-- ... -->
</body>
</html>
إذا كان للتذييل ارتفاع ثابت وأنت تعرف ذلك ويمكنك ترميزه في CSS، فيمكنك القيام بذلك على النحو التالي:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.content
{
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 50px; /* that's the height of the footer */
overflow : auto;
background-color : blue;
}
.footer
{
position : absolute;
left : 0;
right : 0;
bottom : 0px; /* that's the height of the footer */
height : 50px;
overflow : hidden;
background-color : green;
}
</style>
</head>
<body>
<div class="content">
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
</div>
<div class="footer">
the footer
</div>
</body>
</html>
لا تنتمي إلى StackOverflow
