【问题标题】:Get the Div width without the scroll Bar width获取不带滚动条宽度的 Div 宽度
【发布时间】:2014-08-27 14:17:46
【问题描述】:

我在这里遇到了问题。这里有两个div“div1”和“div2”。这里我想根据“div2”的宽度来调整“div1”的宽度。我的要求是“div1”不应包含滚动条的宽度,即我应该设置“div1”的高度 不包括“div2”中滚动条的宽度。我想要一个 jquery 函数来查找宽度并减小“div1”的宽度.. 样品要求如下所示

html

<div class="div1"></div>
<div class="div2">HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello</div>

css

.div1
{
    width:100px;
    height:100px;
    border:1px solid black;
}
.div2
{
    width:100px;
    height:300px;
    border:1px solid black;
    overflow:auto;
    word-break:break-all;
}

小提琴演示在这里

Fiddle

【问题讨论】:

  • 试试这个 - jsfiddle.net/d34Fk/1
  • 我期待一个 jquery 函数来动态减小宽度,它不应该被硬编码
  • 好的,现在试试 - jsfiddle.net/d34Fk/3
  • K.. 这里的滚动宽度是硬编码的。无论如何动态获取滚动条宽度

标签: javascript jquery width scrollbar


【解决方案1】:

看到这个:http://jsfiddle.net/d34Fk/5/

jQuery :

var width = $('.div2')[0]['clientWidth'];
$('.div1').css({'width':width+'px'});

【讨论】:

  • 太棒了!但是你能解释一下 wat 的客户端宽度吗...?
  • console.log($('.div2')) 为您提供有关该特定 DOM 元素的所有信息。 clientWidth 是没有滚动条的宽度。打开这个小提琴:jsfiddle.net/d34Fk/10,然后打开开发者工具并导航到控制台。你会在那里看到你记录的元素。导航到0,搜索clientWidth,信息都在了。
猜你喜欢
  • 1970-01-01
  • 2013-10-10
  • 2012-12-17
  • 1970-01-01
  • 2011-01-12
  • 2012-06-04
  • 1970-01-01
  • 1970-01-01
  • 2012-11-03
相关资源
最近更新 更多