如何使 div 100% 高度固定？答案

【问题标题】：How can I make a div 100% height fixed?如何使 div 100% 高度固定？
【发布时间】：2014-11-14 21:46:14
【问题描述】：

我想要一个高度为 100% 但位置固定的 div，例如本网站的右侧：http://www.dast2.com

我知道这些是必需的：height:100%;位置：固定；

但它对我不起作用。

【问题讨论】：

该网站的右侧似乎没有 100% 的高度。

标签： css position fixed

【解决方案1】：

旧的，但在这里：

div#sidebar {
   position: fixed;
   top: 0px;
   bottom: 0px
}

【讨论】：

【解决方案2】：

试试这个：

<body>

  <div id="sidebar">

  </div>

</body>
<style>

div#sidebar {
  position: fixed;
  background-color : #00FF00;
  height: 100%;
  width: 300px;
  overflow: hidden;
}

</style>

here is live demo

【讨论】：

【解决方案3】：

.bg-container{ 
  position: fixed;
  width: 100%;
  height: 100%; 
}

【讨论】：

请解释这段代码为什么以及如何解决 OP 的问题。否则你的答案将被删除。
如果您想要一个固定和全宽的 div，只需测试它是否适合您，不需要更多解释 kanaka。
一个好的解释是高质量内容的重要组成部分，这也是 StackOverflow 在其他社区中脱颖而出的原因。因此，如果您无法解释您的代码，只需对问题发表评论而不是回答它。
很好，你是对的，但这段代码很简单，我认为不需要更多解释。如果您认为需要它，请查看它。

【解决方案4】：

使用 vh：

视口高度 (vh)。这个单位是根据高度视口。 1vh 的值等于视口高度的 1%。

height: 100vh;

【讨论】：

【解决方案5】：

html, body{height:100%;}

按照这个并给 div 100%

【讨论】：

【解决方案6】：

浏览器不能很好地计算高度。 height: auto 表示“获得与您的内容相同的高度”。但是height: 100% 并不总是很好，因为元素的内容定义了它的高度。所以身体高度是由它的内容定义的。因此，当您指示您的内容具有height: 100% 时，您指示它与主体具有相同的高度，但主体与内容的高度相同，因此您指示它与自身一样高。

您必须为 body 和 html（根元素）提供高度。

在这种情况下，我做了一个演示，我为html元素提供了一个嘲笑height: 10000px。

对于侧边栏（带有红色的那个），您需要的唯一属性是 min-height: 100% 属性。正如您在下面的演示中看到的那样，侧边栏将占据其所有垂直空间。刚刚添加了position: fixed; 和right:0 使其固定在右侧。

这里是demo

快速说明：如果您想在实时网站上获得相同的效果，只需使用开发人员工具检查页面并获取适合您需要的 css/标记。

干杯！

【讨论】：

【解决方案7】：

我认为其中一个容器采用最大宽度，检查你的所有容器我认为其中一个容器采用最大宽度的属性，检查容纳 div 的容器。

【讨论】：

【解决方案8】：

您需要有“显示：阻止”，它才能工作。

HTML：

<body>
  <div class="container">
    <div class="content">
      <p>Top bit</p>
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <p>Some content</p>
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <p>Bottom bit</p>
    </div>
    <div class="fullHeight sidebar">
      <h1>Sticky sidebar</h1>
    </div>
  </div>
</body>

CSS：

.container   {width: 1000px; margin: 0 auto; overflow: hidden; position: relative;}
.content     {width: 690; float: left; position: relative;}
.fullHeight  {height: 100%; display: block; overflow: hidden; position: fixed; width: 300px; background: red; right: 0; top: 0;}

我将背景设置为红色，因此您可以复制该代码，看看它是否有效。我必须承认，我没有测试过它；但我很确定这可以解决问题。让我知道它是否不起作用；然后我会测试它并修复它。

记住要有'Position: relative;'在内部固定元素的元素上 - 所以它“知道”它应该相对于什么进行固定。如果它不在容器或任何东西内（就像我在上面），那么你可以输入“位置：相对；”在身体标签上；像这样：

body  {position: relative;}

【讨论】：