jQuery宽度得到错误的值

Question

I have a problem with the jquery method .width(). I have 4 different textarea that need to resize according to the size of a div that contains them, so I call the method .width() to get the actual width of the div (wich anyway is 100% of the window) but this method always get the wrong value even after wrapping everything in a $(window).ready().

Here is the CSS

#contCode{
    width: 100%;
    height: 500px;
    margin-top: 50px;
    float: left;
    padding: 0;
}
.codeArea{
    float: left;
    font-family: "Lucida Console", Monaco, monospace;
    height:100%;
    padding: 5px 0 0 5px;
    margin: 0;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    resize: none;
}

This is the HTML

<div id="contCode">
    <textarea class="codeArea" placeholder="Put your code here"></textarea>
    <textarea class="codeArea" placeholder="Put your code here"></textarea>
    <textarea class="codeArea" placeholder="Put your code here"></textarea>
    <div class="codeArea"></div>
</div>

And this is the script

$(window).ready(function (){
        var wi = $("#contCode").width(); 
        var wiTex;
        wiTex = (wi) / 4;
        $(".codeArea").width(wiTex);
    });

I have already tried with outerWidth and innerWith and got the same result.

Answer 1

I found two issues. The first I knew about

1. You need to add box-sizing: border-box so that when you set the width of the boxes the border width is included. If you don't, a box set to 100px with a 1px border will actually be 102px wide.

2. The second issue I found was with jQuery's .width() method. For some reason even when I told it manually to set to .width('100px') the boxes were being set to 112px . I changed it to use vanilla JavaScript instead.

You can see from the demo below that the boxes align now.

 $(window).ready(function() { var wi = $("#contCode").width(); var wiTex = (wi) / 4; document.querySelectorAll('.codeArea').forEach(function(node) { node.style.width = wiTex+'px' }) }); 

 #contCode { width: 100%; height: 500px; margin-top: 50px; float: left; padding: 0; } .codeArea { float: left; font-family: "Lucida Console", Monaco, monospace; height: 100%; padding: 5px 0 0 5px; margin: 0; border-right: 1px solid black; border-bottom: 1px solid black; resize: none; background: #ccc; box-sizing: border-box; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="contCode"> <textarea class="codeArea" placeholder="Put your code here"></textarea> <textarea class="codeArea" placeholder="Put your code here"></textarea> <textarea class="codeArea" placeholder="Put your code here"></textarea> <div class="codeArea">The result area</div> </div> 

Answer 2

just use this:

$(document).ready(function (){
    var wi = $("#contCode").width(); 
    var wiTex;
    wiTex = (wi) / 4;
    $(".codeArea").width(wiTex - 7); //here is the trick =)
});

why i substruct 7 pixels? That's because of how css calculate width of an element.

In css, width equals width + padding + border . In your case, real width of element would be: wiTex + 5px of left padding + 2 pixels of borders

---

you can even remove javascript code and use this css :

.codeArea{
    float: left;
    font-family: "Lucida Console", Monaco, monospace;
    height:100%;
    padding: 5px 0 0 5px;
    margin: 0;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    resize: none;
    width: calc(25% - 7px); /* magic =) */
}

You can see it for yourself.

Answer 3

Try this!

  #contCode{ width: 100%; height: 500px; margin-top: 50px; float:left; padding: 0; } .codeArea{ float: left; font-family: "Lucida Console", Monaco, monospace; height:100%; width:22%; //Added this padding:5px 0 0 5px; margin: 0; border:1px solid #ccc; color:#333; resize: none; background-color:#eee; } 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="contCode"> <textarea class="codeArea" placeholder="Put your code here"></textarea> <textarea class="codeArea" placeholder="Put your code here"></textarea> <textarea class="codeArea" placeholder="Put your code here"></textarea> <div class="codeArea">Hello World</div> </div> 

Cheers!

Answer 4

There is a line break after the 3rd textarea. Is it because of the CSS3 box-sizing Property? By default it is content-box,which only contains the content itself but not the padding. You need to change it to border-box;