Question

我在现有网页上添加了bootstrap。网页使用Javascript来调整内容大小，所以

var containerHeight = window.innerHeight - header - footer

使用了几次。

由于我添加了bootstrap，因此在调用<html>的每个页面的初始加载/刷新之后，window.innerHeight的高度错误（表示出现水平滚动条）。＆＃34;额外＆＃34;区域是纯白色，并且debbuging工具告诉我，它位于<body>区域的<html>和jsut部分之外。

任何操作（调整窗口大小，背景事件，任何事情）都会将高度重置为正确的100％，水平滚动条会消失。

只要我用window.innerHeight注释掉该行，问题就会消失。只是打电话！即使未应用结果值，该行也会导致问题。

这很好用：

//var containerHeight = window.innerHeight - header - footer
//$('.someClass').css('height',containerHeight)

这不是

var containerHeight = window.innerHeight - header - footer
//$('.someClass').css('height',containerHeight)

（同样适用于$(window).height() btw）

如何在不删除引导程序的情况下解决此问题。

另外，我拿出了bootstrap.js文件，测试是否有任何冲突脚本。

我将变量重命名了几次，看看它们是否会以某种方式与任何引导设置变量冲突......

我测试了max-height=100%;和类似的东西，但它对我没用。

据我所知，这个问题只发生在IE9中。不幸的是我必须使用这个浏览器，因为我的公司将它作为标准浏览器。

我通过NuGet-Package Manager获取了bootstrap文件，因为我使用ASP.NET

请告诉我，如果您需要更多信息，我将很乐意为您提供。

Answer 1

好的，我强奸了＃34;通过bootstrap.css（上半部分注释掉，检查后半部分，然后重复剩下的区域）

一旦我评论出这一部分：

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 
 {
 position: relative;
 min-height: 1px;
 padding-right: 15px;
 padding-left: 15px;
 }

问题已经解决了。

如果有人能向我解释，我会接受相应的回答！

Window.innerHeight与bootstrap冲突

1 个答案: