Css 我怎样才能使div 100%固定高度？_Css_Position_Fixed

Css 我怎样才能使div 100%固定高度？

css

Css 我怎样才能使div 100%固定高度？,css,position,fixed,Css,Position,Fixed,我想要一个100%高度但固定位置的div，如本网站右侧：我知道这些是必需的：身高：100%；位置：固定但这对我不起作用 html, body{height:100%;} 按此操作并100%分配给div尝试以下操作： <body> <div id="sidebar"> </div> </body> <style> div#sidebar { position: fixed; background-color

我想要一个100%高度但固定位置的div，如本网站右侧：

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

但这对我不起作用

html, body{height:100%;}

按此操作并100%分配给div

尝试以下操作：

<body>

  <div id="sidebar">

  </div>

</body>
<style>

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

</style>


div#侧边栏{
位置：固定；
背景色：#00FF00；
身高：100%；
宽度：300px；
溢出：隐藏；
}

您需要有“Display:block”，它才能工作

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>

我把背景调成红色，这样你就可以把代码复制进去，看看它是否有效。我必须承认，我还没有测试过它；但我相当肯定这会起作用。如果它不起作用，请告诉我；然后我会测试并修复它

记住有‘位置：相对；’在固定元素所在的元素上-因此它“知道”应该相对于什么进行固定。如果它不在容器内或任何东西（比如我的在上面），那么你可以把‘位置：相对；’在身体标签上；像这样：

body  {position: relative;}

浏览器不能很好地计算高度。

height:auto

表示“获得与内容相同的高度”。但是

height:100%

并不总是很好，因为元素的内容定义了它的高度。因此，身体高度是由其内容定义的。因此，当您指示内容具有

高度：100%

时，您指示它具有与主体相同的高度，但主体与内容具有相同的高度，因此您指示它与自身一样高

必须提供正文和html（根元素）的高度

在本例中，我制作了一个演示，为html元素提供了一个ridiculus

height:10000px

对于侧边栏（红色的侧边栏），您需要的唯一属性是

minheight:100%

属性。侧边栏将占据其所有垂直空间，如下面的演示所示。刚刚添加的

位置：固定

和

右侧：0

使其固定在右侧

这是

快速提示：如果您希望在live站点上获得相同的效果，只需使用开发人员工具查看页面并获取适合您需要的css/标记即可

干杯

很旧，但它是这样的：

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

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

使用vh：

视口高度（vh）。此单位基于平台的高度视口。1vh值等于视口高度的1%

该网站的右侧似乎没有100%的高度。请解释为什么以及该代码如何解决OP的问题。否则，您的答案将被删除。如果您想要一个固定和完整的宽div，只需测试它就可以了，不需要更多的解释kanaka。一个好的解释是高质量内容的重要组成部分，这正是StackOverflow在其他社区中脱颖而出的原因。因此，如果你不能解释你的代码，只需对问题留下评论，而不是回答它。很好，你是对的，但是这个代码很简单，我认为不需要更多的解释。如果您认为需要，请查看。

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

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

height: 100vh;