it-swarm.dev

تعيين div ثابت إلى 100٪ عرض الحاوية الأصل

لدي غلاف مع بعض الحشو ، ثم لدي div نسبي عائم مع نسبة مئوية عرض (40 ٪).

داخل div النسبية العائمة ، لدي div ثابتة أرغب في الحصول على نفس حجم الأصل. أفهم أن div ثابتًا قد تم إزالته من تدفق المستند وبالتالي يتجاهل حشوة الغلاف.

HTML

<div id="wrapper">
  <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
  </div>
</div>

CSS

body { 
  height: 20000px 
}  
#wrapper {
  padding: 10%;
}  
#wrap { 
  float: left;
  position: relative;
  width: 40%; 
  background: #ccc; 
} 
#fixed { 
  position: fixed;
  width: inherit;
  padding: 0px;
  height: 10px;
  background-color: #333;
}

هنا الكمان الإلزامي: http://jsfiddle.net/C93mk/489/

لا أحد يعرف طريقة لتحقيق ذلك؟

لقد عدلت كمان لإظهار مزيد من التفاصيل حول ما أحاول تحقيقه ، آسف للارتباك: http://jsfiddle.net/EVYRE/4/

80
Jack Murdoch

يمكنك استخدام الهامش لحاوية .wrap بدلاً من الحشو لـ .wrapper:

body{ height:20000px }
#wrapper { padding: 0%; }
#wrap{ 
    float: left;
    position: relative;
    margin: 10%;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px; 
    height:10px;
    background-color:#333;    
}

jsfiddle

40
YD1m

حاول إضافة تحويل إلى الأصل (ليس من الضروري القيام بأي شيء ، يمكن أن يكون ترجمة صفرية) وقم بتعيين عرض الطفل الثابت على 100٪

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 40%; 
    background:#ccc; 
    transform: translate(0, 0);
}
#fixed{ 
    position:fixed;
    width:100%;
    padding:0px;
    height:10px;
    background-color:#333;
}
<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>
2
Wojtek Kochanowski

ماذا عن هذا ؟

$( document ).ready(function() {
    $('#fixed').width($('#wrap').width());
});

باستخدام مسج يمكنك تعيين أي نوع من العرض :)

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

2
Hristo Valkanov

رجل حاوية الخاص بك هو 40 ٪ من عرض العنصر الأصل

ولكن عند استخدام الموضع: ثابت ، يعتمد العرض على عرض منفذ العرض (المستند) ...

بالتفكير ، أدركت أن العنصر الرئيسي لديك يحتوي على حشوة بنسبة 10٪ (يسار ويمين) ، وهذا يعني أن العنصر الخاص بك يحتوي على 80٪ من إجمالي عرض الصفحة. لذلك يجب أن يحتوي العنصر الثابت على 40٪ بناءً على 80٪ من إجمالي العرض

لذلك تحتاج فقط إلى تغيير فئة #fixed إلى

#fixed{ 
    position:fixed;
    width: calc(80% * 0.4);
    height:10px;
    background-color:#333;
}

إذا كنت تستخدم sass أو postcss أو برنامج التحويل البرمجي css آخر ، فيمكنك استخدام المتغيرات لتجنب كسر التصميم عند تغيير قيمة الحشو للعنصر الأصل.

هنا تم تحديث الكمان http://jsfiddle.net/C93mk/2343/

آمل أن يساعد ، التحيات

1
LuizAsFight

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

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    padding-bottom: 10px;
    position: relative;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:absolute;
    width:100%;
    left: 0;
    bottom: 0;
    padding:0px;
    height:10px;
    background-color:#333;

}

http://jsfiddle.net/C93mk/497/

1
MattP

علاوة على أحدث jsfiddle ، فاتتك شيء واحد فقط:

#sidebar_wrap {
  width:40%;
  height:200px;
  background:green;
  float:right;
}
#sidebar {
  width:inherit;
  margin-top:10px;
  background-color:limegreen;
  position:fixed;
  max-width: 240px; /*This is you missed*/
}

ولكن ، كيف سيحل هذا مشكلتك؟ بسيط ، يتيح شرح لماذا أكبر من المتوقع أولاً.

سيستخدم العنصر الثابت #sidebar حجم عرض النافذة كقاعدة للحصول على حجمه الخاص ، مثل كل عنصر ثابت آخر ، بمجرد تعريف هذا العنصر width:inherit و #sidebar_wrap يحتوي على 40٪ كقيمة في العرض ، فسوف يقوم بحساب window.width * 40% ، أكبر من عرض .container الخاص بك ، #sidebar سيكون أكبر من #sidebar_wrap.

بهذه الطريقة ، يجب عليك تعيين أقصى عرض في #sidebar_wrap ، لمنع أن تكون أكبر من #sidebar_wrap.

تحقق من هذا jsfiddle الذي يعرض رمز العمل وشرح كيف يعمل هذا بشكل أفضل.

0
Vagner