توسيع div لملء العرض المتبقي

https://stackoverflow.com/questions/1260122

12-09-2019
|

سؤال

أريد تخطيط DIV ذو عمودين، حيث يمكن أن يكون لكل منها عرض متغير

div {
    float: left;
}
.second {
    background: #ccc;
}

<div>Tree</div>
<div class="second">View</div>

أريد أن يتوسع Div "عرض" إلى العرض بأكمله متاحا بعد "الشجرة" Div مملوءة بالمساحة اللازمة. حاليا يتم تغيير حجم DIV الخاص بي "View" إلى المحتوى الذي يحتوي عليه سيكون جيدا أيضا إذا كان كل من Divs يستغرق الارتفاع كله

لا تكرار إخلاء المسئولية:

قم بتوسيع DIV إلى أقصى عرض عند تعويم: تم تعيين اليسارلأنه هناك اليسار لديه عرض ثابت.

مساعدة في DIV - جعل DIV تناسب العرض المتبقيلأنني بحاجة إلى عمودين يتماشى إلى اليسار

المحلول

الحل لهذا هو في الواقع سهل جدا، ولكن ليس في الكل بديهي. يجب أن تؤدي إلى تشغيل شيء يسمى "سياق تنسيق كتلة" (BFC)، والذي يتفاعل مع العوامات بطريقة محددة.

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

يجب أن يعمل هذا عبر جميع المتصفحات الحالية، على الرغم من أنك قد تضطر إلى تشغيل Haslayout في IE6 و 7. لا أستطيع التذكير.

Demos:

ثابت اليسار: http://jsfiddle.net/a8zly/5/
ثابت الحق: http://jsfiddle.net/a8zly/2/

نصائح أخرى

اكتشفت للتو سحر صناديق المرنة (العرض: فليكس). جرب هذا:

<style>
  #box {
    display: flex;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

صناديق المرن تعطيني السيطرة التي تمنيتها CSS منذ 15 عاما. انها هنا اخيرا! مزيد من المعلومات: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

سيكون هذا مثالا جيدا على شيء تافه مع الجداول والصعبة (إن لم يكن مستحيلا، على الأقل في إحساس متصفح عبر الإنترنت) القيام به مع CSS.

إذا تم عرض كل من الأعمدة عرضا، فسيكون ذلك سهلا.

إذا كان أحد الأعمدة ثابت عرض، فسيكون هذا أكثر صعوبة ولكن قابلة للتنفيذ تماما.

مع كل من الأعمدة عرض المتغير، IMHO تحتاج إلى استخدام جدول عمودين فقط.

تحقق من هذا الحل

.container {
  width: 100%;
  height: 200px;
  background-color: green;
}
.sidebar {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.content {
  background-color: red;
  height: 200px;
  width: auto;
  margin-left: 200px;
}
.item {
  width: 25%;
  background-color: blue;
  float: left;
  color: white;
}
.clearfix {
  clear: both;
}

<div class="container">
  <div class="clearfix"></div>
  <div class="sidebar">width: 200px</div>

  <div class="content">
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
  </div>
</div>

هنا، قد يساعد هذا ...

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="clear" />
  </div>
</body>

</html>

حل فليكس

هذا هو ما flex-grow الملكية ل.

html, body {
  height: 100%;
}
.wrapper {
  display: flex;
  height: 100%;
}
.second {
  flex-grow: 1;
}

<div class="wrapper">
  <div style="background: #bef;">Tree</div>
  <div class="second" style="background: #faa;">View</div>
</div>

ملحوظة: أضف بادئة البائعين فليكس إذا لزم الأمر المتصفحات المدعومة.

يستخدم calc:

.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}

<div style="width:200px">
  <div class="leftSide">a</div>
  <div class="rightSide">b</div>
</div>

المشكلة في هذا هي أنه يجب تحديد جميع العروض بشكل صريح، إما كقيمة جيدة (PX و EM تعمل بشكل جيد)، أو كنسبة مئوية من شيء يعرف نفسه بشكل صريح.

لا أفهم لماذا الناس على استعداد للعمل بجد للعثور على حل نقي CSS للحصول على تخطيطات عمودية بسيطة سهلة الاستخدام القديم TABLE بطاقة شعار.

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

<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
  <tr>
    <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
    <td bgcolor="#F0F0F0">View</td>
  </tr>
</table>

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

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="right">View</div>
    <div style="width: <=100% getTreeWidth()100 %>">Tree</div>
    <div class="clear" />
  </div>
  <div class="ColumnWrapper">
    <div class="ColumnOneHalf">Tree</div>
    <div class="ColumnOneHalf">View</div>
  </div>

</body>

</html>

يمكنك المحاولة تخطيط الشبكة CSS..

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0;
  background-color: #ccc;
}

<dl>
  <dt>lorem ipsum</dt>
  <dd>dolor sit amet</dd>
  <dt>carpe</dt>
  <dd>diem</dd>
</dl>

شكرا على قابس Simpl.css!

تذكر أن تلتف جميع الأعمدة الخاصة بك في ColumnWrapper مثل ذلك.

<div class="ColumnWrapper">
    <div class="ColumnOneHalf">Tree</div>
    <div class="ColumnOneHalf">View</div>
</div>

أنا على وشك إطلاق الإصدار 1.0 من simpl.css لذلك المساعدة في نشر الكلمة!

تنفيذ مختلف قليلا،

لوحان Div (محتوى + إضافي)، جنبا إلى جنب، content panel يتوسع إذا extra panel غير موجود.

JSfiddle: http://jsfiddle.net/qltmf/1722/

بات - أنت على حق. لهذا السبب سيضيف هذا الحل كلا من "الديناصورات" والمعاصرين. :)

.btnCont {
  display: table-layout;
  width: 500px;
}

.txtCont {
  display: table-cell;
  width: 70%;
  max-width: 80%;
  min-width: 20%;
}

.subCont {
  display: table-cell;
  width: 30%;
  max-width: 80%;
  min-width: 20%;
}

<div class="btnCont">
  <div class="txtCont">
    Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
  </div>
  <div class="subCont">
    This column as well as the entire container works like a table. Isn't Amazing!!!
  </div>
</div>

إذا تم إصلاح عرض العمود الآخر، فماذا عن استخدام calc CSS وظيفة العمل لجميع المتصفحات المشتركة:

width: calc(100% - 20px) /* 20px being the first column's width */

وبهذه الطريقة سيتم احتساب عرض الصف الثاني (أي العرض المتبقي) وتطبيقه بشكل مستجيب.

Flex-Fresh - هذا يحدد القدرة على النمو في البند المرن إذا لزم الأمر. يقبل قيمة UniteLess التي تعمل بمثابة نسبة. تملي ما مقدار المساحة المتاحة داخل الحاوية المرنة يجب أن يستغرق العنصر.

إذا كانت جميع العناصر تحتوي على Flex-Wring - 1، فسيتم توزيع المساحة المتبقية في الحاوية بالتساوي لجميع الأطفال. إذا كان أحد الأطفال لديه قيمة 2، فإن المساحة المتبقية ستستغرق ضعف مساحة أخرى مثل الآخرين (أو سيحاول ذلك، على الأقل). شاهد المزيد هنا

.parent {
  display: flex;
}

.child {
  flex-grow: 1; // It accepts a unitless value that serves as a proportion
}

.left {
  background: red;
}

.right {
  background: green;
}

<div class="parent"> 
  <div class="child left">
      Left 50%
  </div>
   <div class="child right">
      Right 50%
  </div>
</div>

لست متأكدا مما إذا كانت هذه هي الإجابة التي تتوقعها، فلماذا لا تحدد عرض الشجرة إلى "تلقائي" وعرض "عرض" إلى 100٪؟

إلقاء نظرة على أطر تخطيط CSS المتاحة. أوصي splpl. أو، إطار مخطط أكثر تعقيدا قليلا.

إذا كنت تستخدم SIMPL (والتي تنطوي على استيراد واحد فقط simpl.css. ملف)، يمكنك القيام بذلك:

<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>

, ، لتخطيط 50-50، أو:

<div class="ColumnOneQuarter">Tree</div>
<div class="ColumnThreeQuarters">View</div>

, ، لمدة 25-75 واحد.

بكل بساطة.

كتبت وظيفة JavaScript التي أسميها من JQuery $ (Document). Ready (). سيؤدي ذلك إلى تحليل جميع الأطفال من DIV الوالدين ويقودون فقط معظم الطفل الأكثر أهمية.

لغة البرمجة

...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....

جافا سكريبت

$(document).ready(function(){
    stretchDivs();
});

function stretchDivs() {
    // loop thru each <div> that has class='stretch'
    $("div.stretch").each(function(){
        // get the inner width of this <div> that has class='stretch'
        var totalW = parseInt($(this).css("width"));
        // loop thru each child node
        $(this).children().each(function(){
            // subtract the margins, borders and padding
            totalW -= (parseInt($(this).css("margin-left")) 
                     + parseInt($(this).css("border-left-width")) 
                     + parseInt($(this).css("padding-left"))
                     + parseInt($(this).css("margin-right")) 
                     + parseInt($(this).css("border-right-width")) 
                     + parseInt($(this).css("padding-right")));
            // if this is the last child, we can set its width
            if ($(this).is(":last-child")) {
                $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
            } else {
                // this is not the last child, so subtract its width too
                totalW -= parseInt($(this).css("width"));
            }
        });
    });
}

يمكنك استخدام مكتبة CSS W3 التي تحتوي على فئة تسمى rest هذا فقط:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-row">
  <div class="w3-col " style="width:150px">
    <p>150px</p>
  </div>
  <div class="w3-rest w3-green">
    <p>w3-rest</p>
  </div>
</div>

لا تنس ربط مكتبة CSS في الصفحة header:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

إليك العرض التوضيحي الرسمي: W3 School Tryit Editor

هذا سهل إلى حد ما باستخدام FlexBox. انظر المقتطف أدناه. لقد أضفت حاوية مجمع للتحكم في التدفق وتعيين ارتفاع عالمي. تمت إضافة حدود أيضا لتحديد العناصر. لاحظ أن Divs الآن تتوسع إلى الارتفاع الكامل أيضا، كما هو مطلوب. يجب استخدام بادئة البائعين ل Flexbox في سيناريو عالمي حقيقي لأنها لم يتم دعمها بالكامل بعد.

لقد طورت أداة مجانية لفهم تخطيطات التصميم باستخدام FlexBox. تحقق من ذلك هنا:http://algid.com/flex-designer.

.container{
    height:180px;
    border:3px solid #00f;
    display:flex;
    align-items:stretch;
}
div {
    display:flex;
    border:3px solid #0f0;
}
.second {
    display:flex;
    flex-grow:1;
    border:3px solid #f00;
}

<div class="container">
    <div>Tree</div>
    <div class="second">View</div>
</div>

إذا كانت كل من العرض طول متغير لماذا لا تحسب العرض مع بعض النص البرمجي أو جانب الخادم؟

<div style="width: <=% getTreeWidth() %>">Tree</div>

<div style="width: <=% getViewWidth() %>">View</div>

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

لا تنتمي إلى StackOverflow