CSS مرتفعات ديناميكية

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

  •  11-09-2019
  •  | 
  •  

سؤال

لدي ثلاث علامات DIV، مجمع واثنين من جانب جنبا إلى جنب داخل المجمع:

<div id="wrapper">
   <div id="left"></div>
   <div id="right"></div>
</div>

أريد إنشاء الشرط الذي <div id="left"> العلامة هي ارتفاع متغير، وتمتد التفاف.

نتيجة لذلك، <div id="right"> سوف تتوسع إلى أي ارتفاع أصبح التفاف.

ما CSS سوف ينجز هذا؟ شكرا!

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

المحلول

إذا كنت ستذهب مع JQuery، فيمكنك القيام بذلك.

$(document).ready(function(){
   var leftHt = $('#left').height();
   $('#right').css("height",leftHt);

});

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

إذا لم يكن لديك بالفعل api api، فقط الماضي هذا أعلاه جافا سكريبت. 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="javascript" language"javascript"></script>

مثال العام هنا:

http://michaelpstone.net/development/dynamic-height.html.

نصائح أخرى

ربما أكون متأخرا عن الحفلة، لكنه بسيط حقا أن أفعل ما تصفه مع CSS نقي. الحيلة هي لجعل #right وضعت تماما وتعطيه top و bottom من 0. هذا سوف يمتد إلى أي ارتفاع #left هو إعطاء #wrapper. وبعد إليك مثال عمل كامل - #left هو اخضر، #right الأزرق، و #wrapper أحمر، ولكن لم يسبق له مثيل لأنه مغطى بالكامل #left و #right. وبعد حاول إزالة bottom: 0; خط لمعرفة ما يبدو بدونه.

<html lang="en">
  <head>
    <title></title>

    <style type="text/css">
      #wrapper {
        background: #fdd;
        position: relative;
        width: 300px; /* left width + right width */
      }

      #left {
        background: #dfd;
        width: 200px;
      }

      #right {
        background: #ddf;
        bottom: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 100px;
      }
    </style>
  </head>

  <body>
    <div id="wrapper">
      <div id="left">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue</p>
        <p>massa, scelerisque non viverra sagittis, egestas nec erat. Aliquam vel</p>
      </div>
      <div id="right">
        <p>turpis metus. Sed id lorem eu urna suscipit porttitor. Nullam. </p>
      </div>
    </div>
  </body>
</html>

لا توجد طريقة جيدة حقا ل # محصنة لتتناسب مع كل شيء #LET أصبحت. أفضل طريقة للقيام بذلك ربما:

<div id="wrapper">
    <div id="right"></div> <!-- note that right comes before left -->
    <div id="left"></div>
</div>

ثم لديك هذا النمط:

#left, #right {
    width: 50%; /* Adjust as needed */
#right {
    float: right;
}

بهذه الطريقة، لن يؤثر #Right على طول الصفحة ولكن #Left دائما سوف. ومع ذلك، فإن #Right لا تزال لن تمتد إلى طول #tleft. لا أعرف ما السبب في أنه يحتاج إلى امتداده إلى #LET، لكنني أفترض أنه شيء مستحضرات التجميل. أود إما أن أحاول تطبيقه من #LET أو من #WRAPPER بدلا من ذلك إذا كنت تريد أن تتكرر طوال الطريق.

على سبيل المثال، إذا كنت تريد # White White و # Right Red:

#left {
    background: #fff;
}
#wrapper {
    background: #f00;
}

أفضل الحل العملي هو جدول - انظر [هذا السؤال حتى] (جعل اثنين من عناصر css المطفأة نفس الارتفاع).

بالطبع قد يكون لديك أسباب خاصة بك لعدم استخدام الجداول ...

إذا كنت تحاول القيام بالخلفيات أو أي شيء، فحتاج إلى نفس الارتفاع، أود أن أوصي الجداول. انها أسهل بكثير. إذا كان يجب عليك استخدام Divs Div و Frated Divs، فاستخدم هذه المقالة بالطريقة الوحيدة التي رأيتها تعمل بشكل جيد. انها لمدة ثلاث أعمدة، ولكن يمكنك تعديلها لشخصين:

http://matthewjamestaylor.com/blog/oly-grail-no-quirks-mode.htm.

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