it-swarm.asia

كيفية جعل div ملء مساحة أفقية المتبقية؟

لدي 2 div: واحد في الجانب الأيسر والآخر في الجانب الأيمن من صفحتي. الشخص الموجود في الجانب الأيسر له عرض ثابت وأريد أن يملأ الجانب الأيمن المساحة المتبقية.

    #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #ffffff;
    }
    #navigation {
        width: 780px;
        float: left;  
        background-color: #A53030;
    }
<div id="search">Text</div>
<div id="navigation">Navigation</div>
382
alexchenco

هذا يبدو لإنجاز ما تريد.

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}
<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>
61
Boushley

المشكلة التي وجدتها مع إجابة Boushley هي أنه إذا كان العمود الأيمن أطول من اليسار ، فسوف يلتف حول اليسار ويستأنف ملء المساحة بالكامل. ليس هذا هو السلوك الذي كنت أبحث عنه. بعد البحث في الكثير من "الحلول" ، وجدت هذا البرنامج التعليمي الرائع حول إنشاء ثلاث صفحات أعمدة.

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

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

إليك عرض توضيحي في مقتطفات المكدس & jsFiddle

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}
<div id="left">  left  </div>
<div id="right"> right </div>

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

251
Hank

الحل يأتي من خاصية العرض.

في الأساس تحتاج إلى جعل divs يتصرفان مثل خلايا الجدول. لذا بدلاً من استخدام float:left ، سيتعين عليك استخدام display:table-cell على كلا divs ، وبالنسبة إلى div العرض الديناميكي ، يلزمك تعيين width:auto; أيضًا. يجب وضع كلا divs في حاوية عرض 100٪ مع خاصية display:table.

هنا هو المغلق:

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

و HTML:

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

هام: بالنسبة لبرنامج Internet Explorer ، تحتاج إلى تحديد خاصية التعويم على div العرض الديناميكي ، وإلا لن يتم ملء المساحة.

آمل أن يحل هذا مشكلتك. إذا أردت ، يمكنك قراءة المقال الكامل الذي كتبته عن هذا على مدونتي .

123
Mihai Frentiu

نظرًا لأن هذا سؤال شائع إلى حد ما ، فأنا أميل إلى مشاركة حل لطيف باستخدام BFC.
عينة Codepen لما يلي هنا .

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

في هذه الحالة ، يقوم overflow: auto بتشغيل سلوك السياق ويجعل العنصر الأيمن يتمدد فقط إلى العرض المتبقي المتاح وسيتمدد بشكل طبيعي إلى العرض الكامل إذا اختفى .left. خدعة مفيدة للغاية ونظيفة للعديد من تخطيطات واجهة المستخدم ، ولكن ربما يكون من الصعب فهم "لماذا تعمل" في البداية.

99
mystrdat

في هذه الأيام ، يجب استخدام الأسلوب flexbox (يمكن تكييفه مع جميع المتصفحات باستخدام بادئة المتصفح).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

مزيد من المعلومات: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

94
Jordan

إذا كنت لا تحتاج إلى التوافق مع الإصدارات القديمة من بعض المتصفحات (IE 10 8 أو أقل على سبيل المثال) يمكنك استخدام الدالة calc() CSS:

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}
21
Marcos B.

كانت إجابة Boushley هي الأقرب ، ولكن هناك مشكلة واحدة لم تتم معالجتها تم الإشارة إليها. يأخذ يمين div عرض المستعرض بالكامل ؛ المحتوى يأخذ العرض المتوقع. لرؤية هذه المشكلة بشكل أفضل:

<html>
<head>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    body {
        height: 100%;
    }
    #left {
        opacity: 0;
        height: inherit;
        float: left;
        width: 180px;
        background: green;
    }
    #right {
        height: inherit;
        background: orange;
    }
    table {
            width: 100%;
            background: red;
    }
    </style>
</head>
<body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <table><tr><td>Hello, World!</td></tr></table>
    </div>
</body>
</html>

http://jsfiddle.net/79hpS/

المحتوى في المكان الصحيح (في Firefox) ، ومع ذلك ، فإن العرض غير صحيح. عندما تبدأ العناصر الفرعية في وراثة العرض (على سبيل المثال ، الجدول مع width: 100%) ، يتم منحهم عرضًا مساويًا لعرض المتصفح مما يجعلهم يفيضون على يمين الصفحة وإنشاء شريط تمرير أفقي (في Firefox) أو لا يتم تعويمهم ويتم دفعهم للأسفل (في الكروم).

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

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

إذا كان هناك أي مشاكل أو مخاوف ، فلا تتردد في طرحها.

15
Denzel

فيما يلي حل بسيط للحل المقبول ، والذي يمنع العمود الأيمن من الوقوع تحت العمود الأيسر. استبدل width: 100%; بـ overflow: hidden; حلاً صعبًا ، إذا لم يعرفه أحد.

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

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


right
    </div>
</div>

http://jsfiddle.net/MHeqG/2600/

[edit] راجع أيضًا مثالًا لتخطيط ثلاثة أعمدة: http://jsfiddle.net/MHeqG/3148/

12
Dariusz Sikorski

استخدم display:flex

<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>
3
Ildar Zaripov

يبدو أن إجابة Boushley هي أفضل طريقة للذهاب لترتيب ذلك باستخدام العوامات. ومع ذلك ، فإنه لا يخلو من مشاكلها. لن يتوفر لك الخيار Floating Floating داخل العنصر الموسع ؛ سوف يحطم الصفحة.

الطريقة الموضحة "تزيفها" بشكل أساسي عندما يتعلق الأمر بعنصر التوسعة - إنها ليست عائمة بالفعل ، إنها تعمل فقط مع العناصر الطافية ذات العرض الثابت باستخدام هوامشها.

المشكلة إذن هي أن: عنصر التوسعة لا يتم تعويمه. إذا حاولت ولديك أي تداخل متداخل ضمن عنصر التوسيع ، فإن تلك العناصر المتداخلة "المتداخلة" ليست متداخلة على الإطلاق ؛ عندما تحاول التمسك برمز clear: both; أسفل العناصر الطافية "المتداخلة" ، فسوف ينتهي الأمر بمسح العوامات ذات المستوى الأعلى أيضًا.

ثم ، لاستخدام حل Boushley ، أود أن أضيف أنه يجب عليك وضع div مثل ما يلي: .fakeFloat {height: 100٪؛ العرض: 100 ٪ ؛ تعويم: اليسار؛ } ووضع هذا مباشرة داخل div الموسعة ؛ جميع محتويات div الموسعة يجب أن تذهب بعد ذلك داخل هذا العنصر المزيف.

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

3
chinchi11a

واجهت مشكلة مماثلة ووجدت الحل هنا: https://stackoverflow.com/a/16909141/3934886

الحل هو لأعمدة مركز ثابت وأعمدة جانبية سائلة.

.center{
    background:#ddd;
    width: 500px;
    float:left;
}

.left{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}

.right{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}

إذا كنت تريد عمودًا يسارًا ثابتًا ، فما عليك سوى تغيير الصيغة وفقًا لذلك.

3
alex351

إذا كنت تحاول ملء المساحة المتبقية في صندوق flexbox بين عنصرين ، فأضف الفئة التالية إلى div فارغة بين العنصرين اللذين تريد الفصل بينهما:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}
3
Helzgate

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

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>
3
Dominic

/ * * css * /

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

/ * * html * /

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>
0
user1700099

قواعد للعناصر والحاويات.

Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}

استخدام المساحة البيضاء: nowrap ؛ للنصوص في العناصر الأخيرة لإزالتها.

البند X ٪ | البند ص ٪ | البند Z ٪

الطول الكلي دائما = 100 ٪!

إذا

Item X=50%
Item Y=10%
Item z=20%

ثم

البند X = 70 ٪

العنصر X هو المسيطر (العناصر الأولى هي المسيطرة في تخطيط جدول CSS)!

جرب أقصى محتوى ؛ خاصية div div لنشر div في الحاوية:

div[class="item"] {
...
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
...

}

0
Dmytro Yurchenko

لقد كنت أعمل على هذه المشكلة لمدة يومين ولديّ حل قد يصلح لك ولأي شخص آخر يحاول جعل عرض ثابت ثابتًا يسارًا ولديه الجانب الأيمن في ملء الجزء المتبقي من الشاشة دون الالتفاف حول الجانب الأيسر. القصد الذي افترضه هو جعل الصفحة سريعة الاستجابة في المتصفحات وكذلك الأجهزة المحمولة.

هنا هو الرمز

// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps.  Without this delay the right div may go off screen when browser is refreshed 
setTimeout(function(){
    fixRightSideWidth();
    $('.right_content_container').show(600);
}, 50);

// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
    fixRightSideWidth();
});

function fixRightSideWidth(){
    $blockWrap = 300; // Point at which you allow the right div to drop below the top div
    $normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
    if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
        $('.right_content_container').width( $normalRightResize );
        $('.right_content_container').css("padding-left","0px");
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    
    }
    else{
        if( $('.right_content_container').width() > 300 ){
            $('.right_content_container').width(300);
        }
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    }
    if( $thePageRefreshed == true ){
        $thePageRefreshed = false;
    }
}
/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
    min-width: 310px;
    background: #333;
    min-height:100vh;
}

body{
        background: #333;
        background-color: #333;
        color: white;
    min-height:100vh;
}

.top_title{
  background-color: blue;
  text-align: center;
}

.bottom_content{
        border: 0px;
        height: 100%;
}

.left_right_container * {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #333 !important;
    background-color: #333 !important;
    display:inline-block;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
    font-family: -Apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    border-radius: 0;
    box-sizing: content-box;
    transition: none;
}

.left_navigator_item{
        display:inline-block;
        margin-right: 5px;
        margin-bottom: 0px !important;
        width: 100%;
        min-height: 20px !important;
        text-align:center !important;
        margin: 0px;
        padding-top: 3px;
        padding-bottom: 3px;
        vertical-align: top;
}

.left_navigator_items {
    float: left;
    width: 150px;
}

.right_content_container{
    float: right;
    overflow: visible!important;
    width:95%; /* width don't matter jqoery overwrites on refresh */
    display:none;
    right:0px;
}

.span_text{
        background: #eee !important;
        background-color: #eee !important;
        color: black !important;
        padding: 5px;
        margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
    <div class="left_right_container">
        <div class="left_navigator_items">
            <div class="left_navigator_item">Dashboard</div>
            <div class="left_navigator_item">Calendar</div>
            <div class="left_navigator_item">Calendar Validator</div>
            <div class="left_navigator_item">Bulletin Board Slide Editor</div>
            <div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
            <div class="left_navigator_item">TV Guide</div>
        </div>
        <div class="right_content_container">
            <div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.

Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.

Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.

Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.

In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
        </div>
    </div>
</div>

إليكم حيلتي التي قد تعمل من أجلك كما فعلت بالنسبة لي. https://jsfiddle.net/Larry_Robertson/62LLjapm/

0
Larry Robertson

وأتساءل أن لا أحد يستخدم position: absolute مع position: relative

لذلك ، سيكون حل آخر:

HTML

<header>
  <div id="left"><input type="text"></div>
  <div id="right">Menu1 Menu2 Menu3</div>
</header>

CSS

header { position: relative;  }
#left {
    width: 160px;
    height: 25px;
}
#right {
    position: absolute;
    top: 0px;
    left: 160px;
    right: 0px;
    height: 25px;
}

مثال Jsfiddle

0
Buksy

يمكنك استخدام خصائص الشبكة CSS ، وهي الطريقة الأكثر وضوحا ونظيفة وبديهية هيكل صناديق الخاص بك.

#container{
    display: grid;
    grid-template-columns: 100px auto;
    color:white;
}
#fixed{
  background: red;
  grid-column: 1;
}
#remaining{
  background: green;
  grid-column: 2;
}
<div id="container">
  <div id="fixed">Fixed</div>
  <div id="remaining">Remaining</div>
</div>
0
colxi

لدي حل بسيط للغاية لهذا! // HTML

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

// CSS

#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}

الرابط: http://jsfiddle.net/MHeqG/

0
iamatsundere181

حاول إضافة موضع relative ، وقم بإزالة خصائص width و float في الجانب الأيمن ، ثم أضف خاصية left و right بقيمة 0.

أيضًا ، يمكنك إضافة قاعدة margin left مع القيمة بناءً على عرض العنصر الأيسر (+ بعض البكسل إذا كنت بحاجة إلى مسافة بين) للحفاظ على موضعه.

هذا المثال يعمل لي:

   #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #FFF;
    }

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }
0
KeepMove

كان لدي مشكلة مماثلة وتوصلت إلى ما يلي والتي عملت بشكل جيد

CSS:

.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}

HTML:

<div class=top>top </div>
<div>
    <div class="left">left </div>
    <div class="right">
        <div class="content">right </div>
    </div>
</div>

لن يتم التفاف هذه الطريقة عندما يتم تقليص النافذة ولكن سيتم تلقائيًا توسيع منطقة "المحتوى". سيحتفظ بعرض ثابت لقائمة الموقع (يسار).

وللعرض التلقائي لتوسيع مربع المحتوى والعرض التوضيحي للمربع العمودي الأيسر (قائمة الموقع):

https://jsfiddle.net/tidan/332a6qte/

0
Tidan
.container {
  width:100%;
  display:table;
  vertical-align:middle;
}

.left {
  width:100%;
  display:table-cell;
  text-align:center;
}

.right {
  width:40px;
  height:40px;
  display:table-cell;
  float:right;
}
<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div

جرب هذا. عملت معي.

0
Spoorthi

يجعل عنصر جدول html هذا افتراضيًا ... يمكنك تحديد عرض الجدول ، ثم تمتد الأعمدة دائمًا إلى عرض الجدول بأكمله. الباقي هو عن الخيال

0
Botea Florin