[英]Div height inside a div
I'm working on a jquery plugin for my own datagrid. 我正在为自己的datagrid开发一个jquery插件。 The problem I'm facing is a clipping of one div inside another div.
我面临的问题是将一个div裁剪到另一个div中。 I need the last div to fill the remaining space, and I would like to make it without js/jquery to calculate the height if possible.
我需要最后一个div来填充剩余的空间,如果可能的话,我想使其不使用js / jquery来计算高度。 I don't even need compatibility with IE or firefox, just chrome.
我什至不需要与IE或Firefox兼容,仅需兼容chrome。
Here a demostration of the problem: http://jsbin.com/ubiniy/1 这里是问题的演示: http : //jsbin.com/ubiniy/1
As you can see, the scrollbar at the bottom is not visible. 如您所见,底部的滚动条不可见。 With 92% height it's visible at some dimensions, but no others.
高度为92%,在某些尺寸上可见,但其他尺寸则看不到。
Thanks in advance. 提前致谢。
just remove the overflow:auto;
只需删除
overflow:auto;
from .dlgrid
also you can remove padding or magin to make it up to the edge. 您也可以从
.dlgrid
中删除填充或空白以使其边缘突出。
Or if you don't want to remove the overflow:auto;
或者,如果您不想删除
overflow:auto;
from .dlgrid
you can make 从
.dlgrid
您可以制作
<div>Title</div>
<div>Title 2</div>
<div class="dlInnerDiv" style="overflow:auto; height:94%;">
to 至
<div style="height:3%;">Title</div>
<div style="height:3%;">Title 2</div>
<div class="dlInnerDiv" style="overflow:auto; height:94%;">
more info on maybe something that might help here 上或许真的详细信息,这可能有助于在这里
The problem is that it inherits parent's height as you declared but there's also 2 more divs for the titles so there's no room for all since it's over the 100% and it scrolls :) 问题是它继承了您声明的父级的高度,但标题还有2个div,因此没有空间容纳所有内容,因为它超过了100%并且会滚动:)
OK here's an approach: 好的,这是一种方法:
However it needs to be sure that title divs are one line only or you end up with wrong calculation. 但是,需要确保标题div仅是一行,否则最终会导致计算错误。
If so you add this 如果是这样,您添加此
<div class="dlgrid" style="overflow: hidden;......height:700px;">
<div class="title">Title</div>
<div>Title 2</div>
<div class="dlInnerDiv" style="overflow:auto;">....
css: CSS:
div.title{
line-height:20px;
}
div.title + div{
line-height:18px;
}
or 要么
div.title{
height:20px;
}
div.title + div{
height:18px;
}
In that case you have 700-20-18 = 662 or what ever heights you give to those so all is left is to: 在这种情况下,您有700-20-18 = 662或您赋予这些身高以使剩下的一切就是:
div.dlInnerDiv{
max-height:662px;
}
Also you need to reset all unwanted margins and paddings like 另外,您需要重置所有不需要的边距和填充,例如
div.dlgrid,div.dlgrid div{
margin:0;
padding:0;
}
or whatever value you want but take it in consideration when summing the height above because the vertical of these have influence on it in each of the elements participating. 或您想要的任何值,但在对上方的高度求和时要加以考虑,因为这些值的垂直方向会影响参与的每个元素。
I hope I've understood and this is what you're after http://jsbin.com/ubiniy/23 :) 我希望我已经理解了,这就是您追求的http://jsbin.com/ubiniy/23 :)
Keep in mind that this resolves only that particular issue and you might and up with undesired behavior so I do not recommend any approach like this of fixing height in dynamic content and depending on a specific case of circumstances. 请记住,这只能解决特定问题,并且您可能会出现不希望的行为,因此,我不建议像在固定动态内容中的高度以及根据具体情况使用这种方法。
My advice is to have a look how other people have solved this issue making grids or whaever there's no need to find the hot water all over again :) 我的建议是看看其他人是如何解决这个问题的,无论是使用网格还是任何方式,都无需再次寻找热水:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.