javascript - how to get max-width available for a div by using jquery - Stack Overflow

admin管理员组

文章数量:1316690

I have 3 divs like

<div id="d1" style="float:left;width:150px;">
asdqwe
</div>
<div id="d2" style="float:left;">
qwerty
</div>
<div id="d3" style="float:right;width:150px;">
poilkj
</div>

Now i want to set d2 div width dynamically and set it maximum available with as per screen resolution by using jquery.

I tried jQuery('#d2').width() but it gives us only actually hold width.

I want to show up my webpage screen like d1 for 150px from left and d3 for 150px from right and rest of available widht for d2.

Please let me know how do we do it????

I have 3 divs like

<div id="d1" style="float:left;width:150px;">
asdqwe
</div>
<div id="d2" style="float:left;">
qwerty
</div>
<div id="d3" style="float:right;width:150px;">
poilkj
</div>

Now i want to set d2 div width dynamically and set it maximum available with as per screen resolution by using jquery.

I tried jQuery('#d2').width() but it gives us only actually hold width.

I want to show up my webpage screen like d1 for 150px from left and d3 for 150px from right and rest of available widht for d2.

Please let me know how do we do it????

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Sep 19, 2013 at 7:08 Gaurav AgrawalGaurav Agrawal 4,4311010 gold badges4646 silver badges6464 bronze badges 1

• api.jquery./outerWidth – Arun Commented Sep 19, 2013 at 7:11

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 4

By default, <div> only fills the space it needs when floated.

You can't get the width you require like this, but you can set it:

$("#d2").width($(window).width() - $("#d1").width() - $("#d1").width);

Be warned: if the user resizes their window (or anything else to change the viewport size), you will need to update this value. You might want to get around this by hooking onto the window resize event:

$(window).on("resize", function() {
    $("#d2").width($(window).width() - $("#d1").width() - $("#d1").width);
});

entireScreenWidth = screen.width
d1Width = $("#d1").width()
d2Width = $("#d2").width()

$("#d3").width(entireScreenWidth-d1Width-d2Width)

In your scenario, you need to get screen width and deduct width of #d1 and #d3 from screen width. This calculated width can be assigned to #d2.

You can get the viewport width using

var screenWidth = $( window ).width();

Then set the width for #d2 as :

$('#d2').css('width', screenWidth - 300);

Math.max.apply(Math, $('#d2').map(function(){ return $(this).width(); }).get());

Per suggestion, I'll break that down:

$('#d2').map(function(){
   return $(this).width();
}).get();

Math.max takes N arguments, so you have to call it as: Math.max(200, 300, 250, 100, 400), which is what the Math.max.apply piece acplishes.

you should try this

$( document ).ready( function(){
setMaxWidth();
$( window ).bind( "resize", setMaxWidth ); //Remove this if it's not needed. It will react when window changes size.

function setMaxWidth() {
$( "#d2" ).css( "maxWidth", ( $( window ).width() * 0.7 | 0 ) + "px" );
}

});

If you just don't float the middle div, and put the floating ones before it in the source, you won't need any Javascript, because the browser can handle this by itself.

<div id="d1" style="float:left;width:150px;">
asdqwe
</div>
<div id="d3" style="float:right;width:150px;">
poilkj
</div>
<div id="d2">
qwerty
</div>

Unless you have requirements that you haven't told us about, this should do it.

本文标签： javascripthow to get maxwidth available for a div by using jqueryStack Overflow