jQuery .height() div 高度:自动;意外的行为
我有一个 div(我们称之为 #textbox_A
),其 css 中的高度设置为 height:auto
。
通过 jQuery,我想获取 #textbox_a
的高度并给 #textbox_B
相同的高度:
$(document).ready(function(){
$("#textbox_B").css("height", $("#textbox_A").height()) });
如果我在 css 中使用 的设置值,那么效果非常好>#textbox_a
类似于 height:600px;
。
但是,一旦我将其更改为 height:auto;
,#textbox_B
就会大于 #textbox_a
(当 #textbox_a< /code> 内容很少)或小于
#textbox_a
(#textbox_a
内容较多)。
什么可能导致这种行为?
编辑:我想在滑块中使用上述函数,以便右侧的盒子在未展开时与左侧的高度相同。
I have a div (let's call it #textbox_A
), which height in css is set to height:auto
.
Via jQuery I want to get the height of the #textbox_a
and give #textbox_B
the same height:
$(document).ready(function(){
$("#textbox_B").css("height", $("#textbox_A").height()) });
This works perfectly fine, if I use set values in the css for #textbox_a
like height:600px;
.
But as soon as I change it to height:auto;
the #textbox_B
is either bigger than #textbox_a
(when #textbox_a
has little content) or is smaller than #textbox_a
(with #textbox_a
having more content).
What could cause this behaviour?
Edit: I want to use the above function in a slider, so that the right box, when it is not expanded, has the same height as the left one.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
尝试一下,
.height() 不返回单位。
Try,
.height() does not return unit.
#textbox_A 是相对于另一个本身具有高度的 div 吗?这可能是问题的根源。如果从未设置高度值,则不可能有任何高度值。
所以首先你应该定义一个具有高度的 div 容器。
is the #textbox_A relative to another div with a height itself? it might be the source of the problem. There can't be any height value if none is never set.
So first thing you should define a div container with a height.
检查这个 jsFiddle : http://jsfiddle.net/jRcdw/11/
所做的更改
< ;div id="slider_wrapper">
更改为doument.ready
函数上添加了$("#slider_wrapper").css("height", $("#textbox_A").css("height"));
注意:如果您想始终显示滚动条,请设置
overflow:scroll
。希望这就是您正在寻找的。
Check this jsFiddle : http://jsfiddle.net/jRcdw/11/
Changes made
<div id="slider_wrapper">
changed to<div id="slider_wrapper" style="overflow: auto;">
doument.ready
function added$("#slider_wrapper").css("height", $("#textbox_A").css("height"));
Note: If you want to show the scroll bar always, set
overflow: scroll
.Hope this is what you are looking for.