调整子 div 元素的大小以适应窗口调整大小时的父 div答案

【问题标题】：Resize child div element to fit in parent div on window resize调整子 div 元素的大小以适应窗口调整大小时的父 div
【发布时间】：2016-07-05 22:42:18
【问题描述】：

我有一个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;
}

【问题讨论】：

你能分享你的代码吗？ CSS 和 HTML
子元素使用宽度为%
当窗口宽度太小而不能在一行中包含子元素时，您是否介意堆叠？
为所有 3 个元素添加宽度（百分比）
@PratikDeshmukh 我不能使用所有三个孩子的百分比，因为前两个必须始终有一个固定的height: 400px 和一个固定的width: 288px

标签： javascript jquery css resize autoresize

【解决方案1】：

您可以通过使用 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

【讨论】：

【解决方案2】：

您可以为此使用 css calc 函数。 Support for calc 现在好像还不错。

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

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

【讨论】：

为什么特别提到300px？
@AngelPolitis 抱歉，这取决于您的布局。我已经更新了答案来解释这一点。
感谢您解释@MohitBhardwaj。它完全按照我的意愿工作。

【解决方案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);
});

【讨论】：