DIV для заполнения свободного места

Question

Я пытаюсь создать отзывчивую секцию на своей веб-странице. Я буду использовать медиа-запросы для разметки содержимого и отключить блокировки контента, но мне также необходимо добавить следующее поведение.

На странице, у меня есть 3 колонки, как это:

желтые и зеленые блоки относятся к основным разделам ширина - думать о них как боковые панели.

Красный блок должен быть жидким и заполнить пространство, доступное внутри родительской обертки. Один или несколько блоков фиксированной ширины могут быть скрыты, поэтому нет возможности использовать правое поле или дополнение на блоке жидкости, поскольку оно может быть или не быть релевантным. Поэтому я изо всех сил пытаюсь найти решение.

Вот пример HTML, который может быть размещен на странице.

<div class="wrap"> 
    <div class="fluid"> 
     <p>This should expand to fill the space available</p> 
    </div> 
    <div class="fixed"> 
     <p>Fixed width, but can be hidden</p> 
    </div> 
    <div class="fixed"> 
     <p>Fixed width, but can be hidden</p> 
    </div> 
</div> 

Любые идеи, как это может быть достигнуто?

Answer 1

Попробуйте

<div class="wrap"> 
    <div class="fixed"> 
     <p>Fixed width, but can be hidden</p> 
    </div> 
    <div class="fixed"> 
     <p>Fixed width, but can be hidden</p> 
    </div> 
    <div class="fluid"> 
     <p>This should expand to fill the space available</p> 
    </div> 
</div> 

CSS

.fixed{ 
    float: right; 
    height: 200px; 
    width: 200px; 
    background: #000; 
    color: #fff; 
} 
.fixed:first-child{background:red;} 
.fluid{ 
    overflow: hidden; 
    height: 200px; 
    background: red; 
} 

Ссылка на Fiddle

Answer 2

Вы можете изменить свой HTML и использовать поплавки:

.fixed { 
 
    float: right; 
 
    width: 25%; 
 
} 
 
.wrap, .fluid { /* Clear float */ 
 
    overflow: hidden; 
 
}

<div class="wrap"> 
 
    <div class="fixed"> 
 
    <p>Right - Fixed width, but can be hidden</p> 
 
    </div> 
 
    <div class="fixed"> 
 
    <p>Center - Fixed width, but can be hidden</p> 
 
    </div> 
 
    <div class="fluid"> 
 
    <p>Left - This should expand to fill the space available</p> 
 
    </div> 
 
</div>

В качестве альтернативы, новый путь, используя гибкие коробки:

.wrap { 
 
    display: flex; 
 
} 
 
.fixed { 
 
    width: 25%; 
 
} 
 
.fluid { 
 
    flex-grow: 1; /* Grow to cover remaining space */ 
 
}

<div class="wrap"> 
 
    <div class="fluid"> 
 
    <p>Left - This should expand to fill the space available</p> 
 
    </div> 
 
    <div class="fixed"> 
 
    <p>Center - Fixed width, but can be hidden</p> 
 
    </div> 
 
    <div class="fixed"> 
 
    <p>Right - Fixed width, but can be hidden</p> 
 
    </div> 
 
</div>

Answer 3

Вы можете попробовать некоторые вещи, как это (использует JQuery):

width_equalizer(); 
 

 
$(window).resize(function(){ 
 
    width_equalizer(); 
 
}); 
 

 

 
function width_equalizer() 
 
{ 
 
    var width_of_fixed = 100 
 
    var viewport_width = $(document).width(); 
 
    $('.fixed').css('width',width_of_fixed) 
 
    $('.fluid').css('width',viewport_width - (2.5*width_of_fixed)) 
 
}

.fluid{ 
 
    display:inline-block; 
 
    background:red; 
 
    height:100px; 
 
    vertical-align:top; 
 
} 
 

 
.fixed 
 
{ 
 
    display:inline-block; 
 
    height:100px; 
 
    vertical-align:top; 
 
} 
 

 
.wrap 
 
{ 
 
    width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div class="fluid"> 
 
     <p>This should expand to fill the space available</p> 
 
    </div> 
 
    <div class="fixed" style="background:yellow;"> 
 
     <p>Fixed width, but can be hidden</p> 
 
    </div> 
 
    <div class="fixed" style="background:green;"> 
 
     <p>Fixed width, but can be hidden</p> 
 
    </div> 
 
</div>