الحصول على الارتفاع لوضع div في الوضع المطلق

https://stackoverflow.com/questions/940428

06-09-2019
|

سؤال

كما تم الرد على سؤالي الأخير على الفور..قررت أن أنشر موضوعًا جديدًا يزيل كل شعري، XD

هذه هي المشكلة..

لدي تصميم بتقسيم موضعي مطلق..الذي يحتوي على png شفاف ومرساة بسيطة ...تماما مثل هذا.

<div class="buyfloat">
      <img src="img/buy.png" />
</div>

لذا..أحتاج إلى وضع div.buyfloat هذا في موضع مطلق...لا يتحرك ..لا قفز لا ذبول..أحتاجه فقط بحجم 200 بكسل من أسفل الصفحة ...لأنني أحتاجه فقط في الجزء العلوي من تذييل الصفحة..وكلما زاد ارتفاع الصفحات أو نقص..لا أستطيع استخدام المحدد العلوي.

حسنًا.."استخدم القاع!" يمكنك ان تقول..نعم سيدي حاولت ..ولكن لسبب ما ..يستخدم المحدد السفلي ارتفاع النافذة (الجزء المرئي) بدلاً من الأمر برمته.و..إذا قمت بتمرير الصفحة إلى الأسفل ..الصورة موجودة في منتصف الصفحة.

.buyfloat{
    width:333px;
    height:135px;
    position:absolute;
    left:10px;
    bottom:200px; /**   not working         **/
    margin:5px auto 0 auto;
    z-index:99;
}

أنا أبحث عن بعض جافا سكريبت (أعتقد أنني رأيت واحدة منذ وقت ما) والتي تعطيني ارتفاع الجسم مباشرة على CSS..ولكن إذا كان لديك أي حل مختلف وأسهل ..أنا كلي آذان صاغية!

شكرا لك مقدما.

المحلول

ضع في اعتبارك أن "الموقف:"مطلق" يرتبط في الواقع بالسلف الأول للعنصر الذي له قيمة موضع بخلاف "ثابت" (انظر النقطة 4 في http://www.w3.org/TR/CSS2/visudet.html#containing-block-details).لذلك ربما يكون لديك هذا الموقف ويتم قياس "القاع" من عنصر آخر بدلاً من html/body.

نصائح أخرى

أولا، والطريقة الوحيدة JS يعمل في CSS هو عن طريق "التعبير" والذي هو IE فقط، وثانيا هذا يتطلب زيارتها للمستخدمين أيضا JS قيد التشغيل.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
        body {height: 9000px;position:relative;}
        #a {position:absolute; bottom:0px;}
        </style>
    </head>
    <body>
    <div id="a">bottomDweller</div>
    </body>
</html>

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow