3 div's средний div занял оставшуюся ширину

Question

Хорошо, ребята, я разрывал свои яйца над этим.

У меня есть три divs; левый, средний, правый. Все 100% высоты. Левый и правый div имеют фиксированную ширину 150 пикселей. Теперь я хочу, чтобы средний div занял оставшееся пространство.

Пример: Here

CSS:

#left { 
    height:100%; 
    width:150px; 
    float:left; 
    background:red; 
    z-index:999; 
} 
#middle { 
    height:100%; 
    width:100%; 
    background:yellow; 
    margin-left:-150px; 
    margin-right:-150px; 
} 
#right { 
    float:right; 
    height:100%; 
    width:150px; 
    background:red; 
    z-index:998; 
} 

Answer 1

Использование display: table:

#container { 
    display: table; 
    width: 100%; 
} 

#left, #middle, #right { 
    display: table-cell; 
} 

#left, #right { 
    width: 150px; 
} 

Если #container ваш родительский элемент, как в

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

Вот Fiddle.

Answer 2

Проверить это similar answer

HTML

<div class = "container"> 
    <div class = "fixed"> 
     I'm 150px wide! Glee is awesome! 
    </div> 
    <div class = "fluid"> 
     I'm fluid! Glee is awesome! 
    </div> 
    <div class = "fixed">   
     I'm 150px wide! Glee is awesome! 
    </div> 
</div> 

CSS

html, body { 
    height: 100%; 
    font-family: 'Arial', 'Helvetica', Sans-Serif; 
} 
.container { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 
.container > div { 
    display: table-cell; 
    text-align: center; 
} 
.fixed { 
    width: 150px; 
    background: rgb(34, 177, 77); 
    color: white; 
} 
.fluid { 
    background: rgb(0, 162, 232); 
} 

DEMO

Answer 3

Если вы не хотите использовать ячейки таблицы и не хотите, чтобы ваши внешние коробки фиксировали ширину (вместо этого, чтобы их ширина определялась их содержимым, вы можете использовать метод переполнения и поплавка)

плохая вещь об этом методе, это вы должны придерживаться того переполнения скрытого от ваших див, а также вы должны организовать свои дивы в виде обратных пути (см ниже)

DEMO

HTML

<div class='container'> 

    <div class='third-box'>Third</div> 

    <div class='first-second'> 
     <div class='first-box'>First</div> 
     <div class='second-box'>Second</div> 
    </div> 

</div> 

CSS

.container { 
    width: 400px; 
} 

.first-second { 
    overflow: hidden; 
} 

.first-box { 
    float: left; 
    background-color: coral; 
} 

.second-box { 
    overflow: hidden; 
    background-color: aquamarine; 
} 

.third-box { 
    float: right; 
    background-color: salmon; 
} 

Answer 4

Хорошо используя flex и на основе this answer

#parent { 
 
    display: flex; 
 
} 
 
#left { 
 
    width:150px; 
 
    background-color:#ff0000; 
 
} 
 
#middle { 
 
    flex: 1 1 auto; 
 
    background-color:#00ff00; 
 
} 
 
#right { 
 
    width: 150px; 
 
    background-color:#0000ff; 
 
}

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

Это на самом деле работает, если левый и правый дивы имеет переменную ширину также.