Hey there! Let's work through these two common jQuery width problems you're hitting—they're usually tied to how jQuery handles width values and unit confusion, so let's break it down.

1. Incorrect Percentage Calculations #

The most likely culprits here are mixing up how jQuery returns width values and forgetting that percentages are relative to the parent element:

• Confusing width() vs css('width'): The width() method returns a numeric value (no units, e.g., 560 for 560px), while css('width') returns a string with units (e.g., "70%" or "560px"). If you try to do math with the string version, you'll get errors or NaN.
• Ignoring the parent element's width: Percentages are calculated relative to the element's direct parent. If you're using the element's own width instead of the parent's in your calculation, your percentage will be wrong.

Fix for Calculations #

Use numeric values from width() for math, then format the result as a percentage if needed:

// Calculate child element's percentage of parent width
const parentWidth = $('#parent-container').width();
const childWidth = $('#target-element').width();
const percentage = (childWidth / parentWidth) * 100;

// Log or use the formatted percentage
console.log(`Current width: ${percentage.toFixed(1)}%`);

2. Width Jumping to 622.6% & Can't Set to 85% #

That massive percentage number is a red flag—you're almost certainly setting a pixel value as a percentage by accident. Here's why this happens and how to fix it:

• Misusing width() for percentage values: If you call $('#target-element').width(85), jQuery sets the width to 85 pixels, not 85%. To set a percentage, you must use css('width', '85%').
• Accidental pixel-to-percentage conversion: If your code takes a pixel value (e.g., 622.6 from width()) and appends % to it, you'll end up with 622.6% instead of a valid percentage. Double-check where that large number is coming from—you're probably mixing up pixel values and percentage calculations.
• CSS conflicts: Other styles (like !important rules) or incorrect box-sizing might be overriding your jQuery settings. If box-sizing is set to content-box, padding/border will add to the element's width, making the rendered percentage look off.

Fix for Setting 85% Width #

1. Use the correct jQuery method to set percentages:

// This reliably sets the element to 85% of its parent's width
$('#target-element').css('width', '85%');

2. Check for conflicting code: Add console.log($('#target-element').css('width')) right after your set code to confirm if the value is being changed elsewhere (like in a resize event or another function).
3. Set box-sizing to avoid width inflation: Add this CSS to ensure padding/border don't break your percentage calculations:

#target-element, #its-parent {
  box-sizing: border-box;
}

4. Audit your calculation code: If you're generating the percentage dynamically, make sure you're dividing by the parent's width (not the element's own width) and multiplying by 100 to get a 0-100 value.

If you can share a snippet of the code that's causing these issues, I can help pinpoint the exact mistake—but these fixes should cover most cases!

内容的提问来源于stack exchange，提问作者Gunther Gib