How to get the maximum possible width of a div?_问答_开发者

How to get the maximum possible width of a div?

开发者 https://www.devze.com 2023-01-06 23:57 出处：网络

I need to know how one can get the maximum possible width of a div. Generally, a <div>\'s width is limited by it\'s parent, meaning that it can not be larger than a certain amount. How that cert

I need to know how one can get the maximum possible width of a div. Generally, a <div>'s width is limited by it's parent, meaning that it can not be larger than a certain amount. How that certain am开发者_C百科ount can be calculated?

I need this to calculate if the text inside the current <div> has overflown, (since the only way to detect a text overflow is to compare it's current width to its current clientWidth).

Thanks!

A couple ways to do this, let's start with your div...

<div id='mr_cleaver'>
  <div id='beaver'>Blah</div>
</div>

...and then someJavascript:

//Method One: Find the width of the div's parent
var max_beaver_width = $('mr_cleaver').offsetWidth

//Method Two: Max out the div, find length, return to original size.
var beaver_width = $('beaver').offsetWidth;
$('beaver').style.width = "100%";
var max_beaver_width = $('beaver').offsetWidth;
$('beaver').style.width = beaver_width + 'px';

//Method Three: Check for overflow
$('beaver').scrollWidth > $('beaver').offsetWidth ? alert("Over") : alert("Within")

Thanks Steve!

Your suggestions were very helpful. Although none of them worked for me(probably I didn't explain my situation very well), but using your hints, I could find a way to detect text overflow:

/* specifying the height of 'beaver'*/
var font_size= $('beaver').css("font-size");
font_size = parseInt(font_size.replace(/[a-z]*/gi,''));
var maxHeight = font_size + 4; // 4 is to make sure that the font fits in the maxHeight

/*now calculate current height*/
$('beaver').style.overflow-y:visible;
$('beaver').style.overflow-x:hidden;
var cuurentHeight = $('beaver').clientHeigth;

/* check whether overflow is occured*/
if(cuurentHeight > maxHeight){
    //overflow has been occured
}

If you want the div to be 100 % in width with no space between the edges, you can try to add this simpel CSS style to the div:

<style type="text/css">
  #FullWidthDiv {        // EDIT
    position: absolute; // If you use 'fixed' as position, then the div
    display: block;     // won't become smaller when the screen is at is smallest.
float: left;        // The fixed position is good when you for example want the
width: 100%;        // menu to stay in place.
background-color: #06F;
height: auto;
left: 0px;
top: 0px
}
</style>

<html>
<body>
<div id="FullWidthDiv"></div>
</body>
</html>

You can append a div into parent element to measure it.

var test = document.querySelector('#test');

var div = document.createElement('div');
div.style.width = '10000px';
test.appendChild(div);
var maxWidth = test.offsetWidth;
test.removeChild(div);
alert(maxWidth);

#test {
  display: inline-block;
  max-width: 100px;
}

<div id="test"></div>

How to get the maximum possible width of a div?

精彩评论

关注公众号

热门标签

图文推荐

How to get the maximum possible width of a div?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：