it-swarm.asia

موقف المطلق + التمرير

مع التالي HTML و CSS

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
}
.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  background: blue;
}
<div class="container">
  <div class="full-height">
  </div>
</div>

الداخلية div تأخذ رأس الحاوية بالكامل حسب الرغبة. إذا قمت الآن بإضافة محتوى آخر ، تدفق ، إلى الحاوية مثل:

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
}
.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  background: blue;
}
<div class="container">
  <div class="full-height">
</div>

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
  maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate
  placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
</div>

بعد ذلك ، يتم تمرير الحاوية كما هو مرغوب فيه ، إلا أن العنصر الذي تم وضعه تمامًا لم يعد مرتبطًا بأسفل الحاوية ولكنه يتوقف عند أسفل الحاوية الأولى القابلة للعرض. سؤالي هو؛ هل هناك أي طريقة للحصول على العنصر الموضع تمامًا وهو ارتفاع التمرير الكامل للحاوية الخاصة به دون استخدام JS؟

71
Chris Meek

تحتاج إلى التفاف النص في عنصر div وتضمين العنصر الموضعي تمامًا بداخله.

<div class="container">
    <div class="inner">
        <div class="full-height"></div>
        [Your text here]
    </div>
</div>

المغلق:

.inner: { position: relative; height: auto; }
.full-height: { height: 100%; }

يؤدي تعيين موضع div الداخلي على relative إلى جعل عناصر الموضع بداخله تستند إلى موضعه وارتفاعه بدلاً من .container div ، الذي يحتوي على ارتفاع ثابت. بدون div ، ذات الموضع النسبي ، سيتم حساب .full-height div دائمًا أبعادها وموقعها استنادًا إلى .container.

http://jsfiddle.net/M5cTN/

67
giaour

position: fixed; سوف يحل مشكلتك. على سبيل المثال ، راجع تطبيقي لتراكب منطقة الرسالة (يتم ملؤها برمجيًا):

#mess {
    position: fixed;
    background-color: black;
    top: 20px;
    right: 50px;
    height: 10px;
    width: 600px;
    z-index: 1000;
}

وفي HTML

<body>
    <div id="mess"></div>
    <div id="data">
        Much content goes here.
    </div>
</body>

عندما يصبح #data أطول من sceen ، يحتفظ #mess بموضعه على الشاشة ، بينما يتم تمرير #data تحتها.

21
flaschbier

إذاً gaiour على حق ، ولكن إذا كنت تبحث عن عنصر ارتفاع كامل لا يتم التمرير باستخدام المحتوى ، ولكن في الواقع ارتفاع الحاوية ، إليك الإصلاح. احصل على أحد الوالدين بارتفاع يسبب تجاوز سعة ، وحاوية محتوى يبلغ ارتفاعها 100٪ و overflow: scroll ، ويمكن بعد ذلك وضع الأخوة وفقًا لحجم الأصل وليس حجم عنصر التمرير. هنا هو الكمان: http://jsfiddle.net/M5cTN/196/

والرمز ذات الصلة:

أتش تي أم أل:

<div class="container">
  <div class="inner">
    Lorem ipsum ...
  </div>
  <div class="full-height"></div>
</div>

المغلق:

.container{
  height: 256px;
  position: relative;
}
.inner{
  height: 100%;
  overflow: scroll;
}
.full-height{
  position: absolute;
  left: 0;
  width: 20%;
  top: 0;
  height: 100%;
}
8
TorranceScott