在 window 调整大小时调整子 div 元素以适应父 div

Question

我有一个 div 元素（在下图中用红色边框显示），我希望它能够适合其父元素 div 当 window 调整大小并且不落入下一行时（父级是带有绿色边框的）。

我希望红色 div 有一个起始 width: 949px（在我当前的屏幕中）以适合整个 space 可用，如图所示，但可以调整大小, 所以如果 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 function for this. Support for calc现在好像还不错

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

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

Answer 2

添加 % 宽度或者您可以执行以下操作：

$(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);
});

Answer 3

您可以通过使用 flex-grow 属性来使用 flexbox 来做到这一点。

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

在 window 调整大小时调整子 div 元素以适应父 div

Resize child div element to fit in parent div on window resize

javascript

css

jquery

resize

autoresize