Question

我想要一个100％高度的div但是固定的位置就像这个网站的右侧：http://www.dast2.com

我知道这些是必需的：身高：100％;位置是：固定;

但它对我不起作用。

Answer 1

试试这个：

<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

Answer 2

旧但是在这里：

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

Answer 3

使用vh：

视口高度（vh）。这个单位是基于视口。 1vh等于视口高度的1％。

height: 100vh;

Answer 4

html, body{height:100%;}

按照这个并给予100％的div

Answer 5

浏览器不能很好地计算高度。 height: auto表示与您的内容相同的高度＆＃39;。但height: 100%并不总能很好地发挥作用，因为元素的内容定义了它的高度。因此身高由其内容定义。因此，当您指示您的内容有height: 100%时，您指示它与身体具有相同的高度，但身体与内容的高度相同，因此您指示它与自身一样高。

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

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

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

以下是 demo

快速注意：如果您希望在实际网站上获得相同的效果，只需使用开发人员工具检查页面并获取符合您需求的css /标记。

干杯！

Answer 6

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

Answer 7

我认为其中一个容器具有max-width，请检查您中的所有容器我认为其中一个容器具有max-width的属性，请检查包含div的容器。

Answer 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;}

如何使div 100％高度固定？

8 个答案: