我的列表项几乎完全隐藏，在页面加载时设置列表列的高度答案

【问题标题】：My list item is almost completely hidden, setting the height of my list column on page load我的列表项几乎完全隐藏，在页面加载时设置列表列的高度
【发布时间】：2014-10-02 08:58:44
【问题描述】：

我的页脚中有一个包含几个链接的列表，当我单击最后一个列出的元素时，即“查看更多链接”，它使用 jQuery slideToggle() 将我的列表替换为新成员。

但是有了这个，我看到我的页脚底部又上下了一点。

感谢用户 George，这个问题已经解决，使用 jQuery，通过在页面加载时设置 #col 的高度，这是我的代码：

$('#col').height(function(_,v){ return v; });

但是使用此解决方案，我遇到了另一个我无法理解的问题

我有 5 个使用媒体查询的设计版本，上面是我的移动版本的图像。如您所见，我的“查看更多链接”链接几乎完全隐藏了。

在 Internet Explorer 上，我几乎在项目的所有媒体查询中都有这个问题...

你明白为什么会发生这种情况吗？

这里有我的完整示例：http://jsfiddle.net/jcak/4ma6es6h/8/

【问题讨论】：

我不完全确定问题出在哪里。在 Chrome 和 IE10 中对我来说效果很好。您在哪个版本的 IE 中遇到问题？另外，我可能在这里遗漏了很多上下文，html、css 和 js 的总和在某些时候似乎过于冗长，我相信它可以变得更简单......你也提到了媒体查询，但是有你的代码中没有吗？
嗯，这真的很奇怪。我有代码“$('# col.col4')height (function (, v) {return v;});”因为它还不能很好地工作，但现在我删除了 cmets，我对正在发生的事情看起来更好。而且很奇怪，当我取下我的“$（'# col.col4'）高度（函数（，v）{return v;}）;”的cmets时，我总是遇到同样的问题在我的问题图片中，我在 IE10 中的页脚后面有我的最后一个链接项，但在 google chrome 中也有。但是当我进行大量刷新时，我的页脚正确，而我的最后一个链接项没有在页脚后面，并且两者都开始看起来很棒浏览器 ....
对我来说也很好，不管屏幕大小。而且我也没有看到任何媒体查询。但是，较旧的 IE 存在问题（当然）。此链接包含更多信息：stackoverflow.com/questions/18205253/…
无法在 IE11 中重现此问题。

标签： javascript jquery css

【解决方案1】：

我认为这与媒体查询无关，因为没有它们您也会遇到同样的问题。函数 'function(_,v){ return v; }' 正在返回没有边距或填充的高度，这可能会切断底部的链接。不妨试试这个：

var $col = $('.col4');
$col.height($col.outerHeight(true));

编辑：我刚刚注意到您在上面的评论，您说刷新有时会起作用。这个问题可能是你的代码执行时页面没有完全渲染，所以调用了错误的高度。

此外，您对多个元素使用相同的 ID ('col')。 IE 会讨厌这个并且可能会抛出静默错误。 ID 应该是完全唯一的！

【讨论】：

感谢您的解决方案似乎有效，我只是想使用您的代码找出问题的原因，因为我在最后一个列表项“查看更多链接”后面得到了不同的边距。

【解决方案2】：

使用min-height避免隐藏问题。在旧的 IE 中，IE Respond.js，它会将媒体查询添加到 IE 6-8，这是 twitter bootstrap 推荐的。

如果您对 IE 有进一步的问题，请使用 es3 的 linting 检查您的 js，检查 jshint 并使用一些 polyfill，例如 es5-shim，如果您需要来自 es5 的东西。

【讨论】：

【解决方案3】：

旧版本的 IE 可能会导致此问题发生，也许您可以尝试限制它们或添加一条通知，说明它无法正常工作，因为“您使用的是旧版本的 Internet Explorer”等。

在 Mozilla Firefox、Chrome 和最新的 Internet Explorer 中运行良好。

【讨论】：

【解决方案4】：

如果您设置min-height 而不是height，您的 div 将永远不会太小并且不会折叠到最小高度以下。

但这仍然不能解决为什么你的身高太小。

您可能想查看您的包装盒尺寸。看看这里的模式，什么是高度，什么不是： http://api.jquery.com/innerheight/ 和 http://api.jquery.com/outerHeight/

也许您有没有考虑在内的填充/边距/边框。

【讨论】：

感谢 Laurens Kling，您的解决方案似乎有效，在我的 .col4 中使用了 min-height 和 max-height！
它可能会工作，但它仍然是 hacky。我也喜欢 Aidans 的回答；就像我提到的，看看获得高度的不同方法。在设置任何高度之前，还要确保 div 已完全加载。我不知道您是否正在插入内容；否则请确保您检查 $(document).ready(...)