调整子div元素的大小以适应窗口大小调整

Question

我有一个div元素（在下面的图片中显示为红色边框），当窗口为时，我希望能够将其放入其父div中调整大小并且不会落入下一行（父级是具有绿色边框的）。

我希望红色div有一个起始width: 949px（在我当前的屏幕中），以便适合整个可用空间，如图所示，但是可以调整大小，以便它不会＃如果width: 949px非常合适，则可以进入下一行。

从本质上讲，我不惜一切代价覆盖它在图像中覆盖的区域，即使在较窄的屏幕中也意味着它会像10px宽。

我怎样才能做到这一点？任何使用 CSS ， JavaScript 或 jQuery 的解决方案都会很乐意接受。

图片：

CSS ：

#parent {
    text-align: center;
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
}

#child1-row2 {
    text-align: left;
    vertical-align: middle;
    width: 288px;
    display: inline-block;
}

#child2-row2 {
    text-align: left;
    vertical-align: middle;
    width: 288px;
    position: relative;
    margin: 0 25px 0 25px;
    display: inline-block;
}

#child3-row2 {/* The one with the red border */
    vertical-align: middle;
    height: 452px;
    width: 949px;
    overflow: hidden;
    position: relative;
    display: inline-block;
}

Answer 1

您可以使用css calc功能。 Support for calc现在似乎相当不错。

正如您所提到的，左侧div具有固定宽度，例如每个120px。还假设它们之间的差距是30px。因此，红色div的总宽度为100% - (2*120 + 2*30)px，即（100％ - 300px）。

#red-div
{
  width: calc(100% - 300px);
}

Answer 2

您可以使用flexbox通过使用flex-grow属性来执行此操作。

HTML：

<div id="main">
  <div id="box1">1</div>
  <div id="box2">2</div>
  <div id="box3">3</div>
</div>

CSS：

#main {
   display: flex;
   flex-flow: row;
   width:100%;
   min-height:50px;
}
#box1{
    background-color:red; 
    width:100px; 
}
#box2{
    background-color:blue; 
    width:100px;
}
#box3{
    background-color:green;
    flex-grow: 1;
}

这是一个有效的JSFiddle

Answer 3

添加％宽度，您可以执行以下操作：

$(window).resize(function() {
    var window_width = $(window).width();
    var w1_width = $('.div1').width(); // The first element width
    var w2_width = $('.div2').width(); // The second element width
    var main_div_width = window_width - (w1_width+w2_width+gutter[i.e margin between all 3 elements]);
    $('.main_div_width').css('width', main_div_width);
});