Question

我的问题是让DIV具有固定的高度。以下是代码。除了#gridDiv之外，All包含一些其他元素。 gridDiv将在运行时附加网格。而且我希望gridDiv占据屏幕的60％，无论它内部是否有网格。如果网格太长而无法放入gridDiv DIV中，我希望gridDiv有一个滚动条。

目前gridDiv只有内联高度。我怎样才能实现我的目标？谢谢。

<div id="mainDiv" style="display: block">

    <div id="topDiv" style="display: block; height:20%; text-align:center"></div>

    <div id="bottomDiv" style="display: block; height:80%">
        <div id="gridDiv" style="display: block; height:80%"></div>
        <div id="buttonDiv" style="display: block; width:100%; height:20%; text-align:center"></div>
    </div>

</div>

Answer 1

您始终可以使用 CSS3的vh （视口高度）单位：#gridDiv{ height:60vh; }。它会使gridDiv 60％的视口 - 无论是什么（实际上浏览器都很重要:)）。

首先，不要使用内联CSS，因为它很难使用和调试。 如果是出于说明目的 - 我也会使用内联CSS。
您的#mainDiv遗失height。高度与父元素高度有关。
您可能缺少定义文档的高度
除非您全局覆盖DIV的display状态，否则默认情况下DIV为block级元素，因此display:block;是多余的。
默认情况下DIV宽度全宽（auto），

html, body{height:100%; margin:0;}

举例说明：

html,
body{
  height:100%;
  margin:0;
}

div{
  background: #ddd;
}

<div id="mainDiv" style="height:100%;">

  <div id="topDiv" style="height:20%;">20</div>

  <div id="bottomDiv" style="height:80%">
    <div id="gridDiv" style="height:80%">inner 80</div>
    <div id="buttonDiv" style="height:20%;">inner 20</div>
  </div>

</div>

现在回到你的#gridDiv - 你想要60％视口高度 - 所以使用60vh身高 - 并添加overflow-y（设置为{{ 1}}或scroll）添加滚动条（如果内容超出该高度）：

auto

html,
body{
  height:100%;
  margin:0;
}

div{
  background: #ddd;
}

#mainDiv    {height:100%;} /* go to html, body height */
#topDiv     {height:20%}   /* 20% of #mainDiv */
#bottomDiv  {height:80%;}  /* 80% of #mainDiv */
  #gridDiv  {height:60vh; overflow-y:scroll;} /* 60% the viewport height */
  #buttonDiv{height:20%;}  /* 20% */

/*just to simulate long content*/ p{height:2000px;}

Answer 2

div的父级必须具有显式的height属性。否则，父div高度是其内容的长度。简单的解决方案是设置<body>元素height property。

<body style="height:500px">

然后你可以使用内联元素的百分比。或者，您可以在运行时捕获浏览器高度并设置为主体元素。

如果您希望div可滚动，则需要添加overflow:scroll属性。

<div id="gridDiv" style="display: block; height:80%; overflow:scroll;">

此代码适用于IE11，不确定其他浏览器。

Answer 3

包含您的要求和示例代码的解决方案：

gridDiv容器必须占据屏幕的60％

假设您的div如下所示：<div class="gridDiv">您可以使用以下代码：

html, body{
    height:100%;
}

.gridDiv{
    height: 60%;
}

如果内容溢出
，则
gridDiv有一个滚动条

.gridDiv{
    overflow:scroll;
}

在this JSFiddle上查看包含溢出填充文字的整个div。

如何修复<div> height

3 个答案: