تذييل لا يتم التمسك أسفل على الرغم من أنني أنها قد مشفرة

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

  •  03-07-2019
  •  | 
  •  

سؤال

I إزالة تذييل في الوقت الحاضر، وكان الموقع الذهاب على الانترنت. لذلك ذهب على الرابط كذلك.

وكما ترون (في FF2 وكذلك في IE7) تذييل في الجزء السفلي من الشاشة، ولكن ليس في أسفل الصفحة (المحتوى).

ولدي هذا في قانون بلدي: 

<div id="wrap">
    <div id="top"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

وهذا في المغلق: 

html {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    padding-bottom: 30px;  /* height of the footer */
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    min-height: 100%;
    position: relative; 
}
*#wrap {            /* IE hack */
height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    padding: 0;
    margin: 0;
}

وأو جعل قصة قصيرة طويلة: تابعت التعليمات المعطاة <لأ href = "http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page" يختلط = " نوفولو noreferrer "> هنا .

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

المحلول

واليمين، وذلك مع #size داخل 100٪، واتخاذ الحشو قبالة التفاف وإضافة ما يلي إلى #content 

overflow:auto;
padding-bottom:30px;

وبعد ذلك وصلتك يعمل بالنسبة لي في FF

نصائح أخرى

وأنت لم تتبع التعليمات الخاصة بك بعناية كافية. مفتاح تخطيط متى 

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

وهو أن الحاوية موقف: أقاربه بينما تذييل له الموقف: المطلق. يضع واحد داخل آخر. لاحظ أن الحاوية مساحة مخصصة للتذييل بحجز الحشو القاع حجم تذييل الصفحة. لذا، فإن تخطيط يعمل فقط عندما تم إصلاح ارتفاع تذييل الصفحة.

وضعه على الاطلاق مع botttom: سوف 0 عنصر وضعت نفسها في الجزء السفلي من أقرب الأم وضعه نسبيا. إذا كان أي هل هناك، يتم استخدام العرض بدلا من ذلك، وهذا هو ما يحدث في التخطيط الخاص بك.

وتذييل شعبة الخاص بك هو ليس الطفل من شعبة التفاف الخاص بك.

وماذا عن هذا واحد ؟

ونقل الحشو من الجزء السفلي من الجسم إلى الجزء السفلي من #wrap. و30px تذييل الصفحة الخاصة بك دائما من أسفل "صفحة" بسبب ذلك الحشو. من خلال وضعه على #wrap عليك منع محتويات #wrap من الذهاب وراء الذيل الخاص بك. 

    <style type="text/css">
html {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    position: relative; 
}
*#wrap {            /* IE hack */
height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    padding: 0;
}
</style>
<div id="wrap">
    <div id="top"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

وهذا عمل بالنسبة لي.

والمنظمة البحرية الدولية، يؤدي IE نجمة الإختراق المشكلة. حاول تغيير الخارقة IE مع: 

*html #wrap {
    ...
}

وهناك تكنيك جيد جدا مع demo في هذا الموقع: HTTP: //www.themaninblue. كوم / تجربة / footerStickAlt /

ويجب أن يكون هناك شيء آخر لهذه المسألة، كل طريقة المذكورة أعلاه عن العمل في مواقع مختلفة، ليس فقط على الألغام.

وهذا هو بلدي مصدر الصفحة، يتم تجريد الأشياء غير الحكومية ذات الصلة (المحتوى والاشياء): 

<body>
    <div id="size"> javascript textsize modifier</div>
    <div id="wrap">

        <div id="top"> logoimage
            <div id="menu">
                <div id="menuwrapper">
                    <ul id="primary-nav">
                        <li> Homelink </li>
                        <li class="menuactive menuparent" class="over"> Link 2
                            <ul>
                                <li> Sublink 1 </li>
                                <!-- etcetera //-->
                            </ul>
                        </li>
                        <li class="menuparent" class="over"> Active Link 3
                            <ul>
                                <li> Sublink 1</li>
                                <!-- etcetera //-->
                            </ul>
                        </li>
                    </ul>
                </div> <!-- end menuwrapper //-->
            </div> <!-- end menu //-->
        </div> <!-- end top //-->

        <div id="content">
            <div id="newssnippet"></div>
            <div id="roundedright"> <!-- rounded corners //-->
                <!-- 6 divs to create rounded corners //-->
                <div id="right">Random main content</div>
                <!-- 7 divs to create rounded corners //-->
            </div> <!-- end rounded corners //-->

            <div id="logo">Another logo</div>

            <div id="roundedleft"> <!-- rounded corners again //-->
                <!-- 6 divs to create rounded corners //-->
                <div id="left">News content</div> 
                <!-- 7 divs to create rounded corners //-->
            </div>  <!-- end rounded corners //-->
        </div> <!-- end content //-->

        <div id="footer"></div>

    </div><!-- end wrap //-->
</body>

ومن الواضح، وأنا أتابع تخطيط المقررة من في الرابط في منصب افتتاح .

وبعد ذلك في CSS، ولدي: 

html {
    height: 100%;
    margin: 0;
    padding: 0;
} 
body {
    background: #e7e7e7 url(images/cms/background.jpg) repeat-x;
    font-family: Verdana, Arial, sans-serif;
    font-size: .8em;
    height: 100%;
    margin: 0;
    padding: 0;
    padding-bottom: 30px;
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    position: relative; 
    min-height:100%;
}
*html #wrap {     /* IE hack */
    height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: transparent url(images/cms/footer.png) no-repeat bottom center;
    padding: 0;
}
#footer p {
    margin: 0;
    padding: 0;
    padding-top: .7em;
    text-align: center;
}
#footer a {
    text-decoration: none;
}

وهذا ينبغي أن يكون كل شيء ذات الصلة ...

ما أنا في عداد المفقودين؟

لسجل: تذييل ما زال مصرا على الجزء السفلي من oage في المكان المناسب إذا كان محتوى مرتفع أقل من 100٪. لذلك، إذا لم يكن ملء الشاشة.
تذييل في منتصف الطريق في مكان مضمون إذا كان المحتوى هو أكثر من 100٪ من الصفحة، لذلك عندما يكون لدي للانتقال إلى رؤية افيريتينج.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top