Question

我正在尝试用引导程序做一个高度为60px的DIV盒。

    <div class="container" >
      <div id="TopRow"class="row">
        <div id="TopDiv" class="col-sx12"></div>
      </div>
    </div>

然后我为TopRow或TopCol分配一个高度：

#TopRow{
height:60px;
box-sizing: border-box;
}

我希望得到一个60px的行容器。显示元素的正确值，但是chrome显示我的高度约为80px。

enter image description here

我没有在IE 11中找到标尺功能来检查它是否是浏览器问题。

也许你经历过类似的事情？

这是给出图片输出的完整代码。标尺显示的重量约为80px

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Top Box</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">


<style>
#TopRow{
height:60px;
max-height:60px;
box-sizing: border-box;
}</style>


</head>
<body>
    <div class="container" >
        <div id="TopRow"class="row">
            <div id="TopDiv" class="col-sx12"></div>
        </div>
    </div>     

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

</body>
</html>

Demo （问题不会发生）

Answer 1

添加max-height

#TopRow{
height:60px;
max-height:60px;
box-sizing: border-box;
}

Answer 2

我终于找到了显示与css中设置不同的高度的原因：如果您缩放页面（即使在另一个时间在另一个窗口中），开发人员窗口将记住并将您的页面缩放到上次使用的值！没有任何暗示......

Bootstrap列高度大于定义的

2 个答案: