最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Resize child div element to fit in parent div on window resize - Stack Overflow

programmeradmin3浏览0评论

I have a div element (shown with red border in the image below), which I want to be able to fit in its parent div when the window is resized and not fall into the next line (the parent is the one with the green border).

I want the red div to have a starting width: 949px (in my current screen) in order to fit the entire space available as shown in the image, but be resizable, so that it doesn't fall into the next line if width: 949px is to much to fit.

In essence, I want it at all costs to cover the area it covers in the image even if in a narrower screen that means it will be like 10px wide.

How can I achieve this? Any solution using CSS, JavaScript or jQuery will be gladly accepted.

The image:

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;
}

I have a div element (shown with red border in the image below), which I want to be able to fit in its parent div when the window is resized and not fall into the next line (the parent is the one with the green border).

I want the red div to have a starting width: 949px (in my current screen) in order to fit the entire space available as shown in the image, but be resizable, so that it doesn't fall into the next line if width: 949px is to much to fit.

In essence, I want it at all costs to cover the area it covers in the image even if in a narrower screen that means it will be like 10px wide.

How can I achieve this? Any solution using CSS, JavaScript or jQuery will be gladly accepted.

The image:

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;
}
Share Improve this question edited Jul 5, 2016 at 14:34 Angel Politis asked Jul 5, 2016 at 14:19 Angel PolitisAngel Politis 11.3k15 gold badges50 silver badges67 bronze badges 8
  • can you please share your code ? CSS and HTML – Mihai T Commented Jul 5, 2016 at 14:22
  • for child elements use width as % – brk Commented Jul 5, 2016 at 14:23
  • Do you mind if the child elements stack when width of the window is too small to contain them in one line? – Cheng Sieu Ly Commented Jul 5, 2016 at 14:25
  • add width in % for all 3 elements – Pratik Deshmukh Commented Jul 5, 2016 at 14:26
  • @PratikDeshmukh I can't user percentages for all three children, since the first two must always have a fixed height: 400px and a fixed width: 288px – Angel Politis Commented Jul 5, 2016 at 14:29
 |  Show 3 more ments

3 Answers 3

Reset to default 3

You can use flexbox to do this by using the flex-grow property.

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;
}

Here is a working JSFiddle

You can use css calc function for this. Support for calc seems to be quite good now.

As you have mentioned, the left side divs are of fixed width, say 120px each. Also suppose the margin between them is 30px. So, the total width left for your red div is 100% - (2*120 + 2*30)px i.e. (100% - 300px ).

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

Add % width or you can do following :

$(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);
});
发布评论

评论列表(0)

  1. 暂无评论