Question

我试图在我的网页左侧放置一个div，它不是固定，必须是100％的高度和30％的宽度。我的意思是，如果你滚动，它也会滚动，并且它不会一直固定在同一个位置。

我遇到的问题是，当我放height: 100%;时，它不会覆盖我向他指示的高度。它仅在我设置position:fixed时覆盖整个高度，但从未将其设置为static，absolute或relative。

我认为可能是因为我必须将width: 100%;和height: 100%;设置为<html>标记，但如果我将其与之比较似乎没有任何区别<body>标记（我知道两个标记之间存在差异，但我不知道在这种情况下它们是否会被应用，我认为不是。）

这是我的html代码：

<html>
<head>
</head>
<body>
    <h1>This is a prove</h1>
    <div id="proveDiv">
      <h1>Hello</h1>
    </div>
</body>
</html>

这是我的CSS代码：

html{
  /* position: relative;  I comment these lines because I saw that there are not any effect
  width: 100%;
  height: 100%; */
}

body{
  position: relative;
  width: 100%;
  height: 100%;
}

#proveDiv{
  position: fixed;
  width: 30%;
  height: 100%;
  background-color: red;
}

Here是你可以看到效果的小提琴。只是尝试更改position id css上的proveDiv属性，您将看到我所指的内容。

我被困在这里，我自己或在SO中找不到任何解决方案。我错过了什么吗？

提前致谢！

Answer 1

将div的最小高度设置为像min-height: 100vh;一样的视口高度。的 Updated fiddle

#proveDiv { width: 30%; min-height: 100vh; background-color: red; }

Answer 2

根据您的描述，这是我提出的工作演示。

http://codepen.io/BenCodeZen/pen/JXLbjN

解决方案基于父容器上的display: flex;，并使用height: 100vh;而不是100％定义元素的高度。通过使用flexbox，它可以让您更好地控制响应式设计的布局。

如果您有任何问题，请与我们联系。

Answer 3

发生这种情况的原因是，当您使用属性fixed时，由于某种原因，div的高度会增加，因为它默认从其容器中继承。在这种情况下，当你的div固定并且其高度设置为100％时，div将获取其容器的整个高度，即容器的整体高度。 PS：如果您希望div具有其初始高度，您可以使用position:initial。

另一方面，使用position：relative是你最好的选择。默认情况下，div将具有自己的初始高度，具体取决于其内容。当div中有更多文本时，它会自动增加其高度。

要解决您的问题，请使用相对位置并根据需要设置高度。（100％会让div占据身体的高度）请注意，您必须同时设置身体和身体。 html标签的高度，否则它不会起作用。（如果您需要进一步解释，请在下面评论）

这就是你的CSS应该如何：

html,body{
  width: 100%;
  height: 100%;
}

#proveDiv{
  position: relative;
  width: 30%;
  height: 100%;
  background-color: red;
}

如果您有任何问题，请在下方发表评论。

如何在我的网页上放置一个左侧未固定的div，其高度是它的最大高度？

3 个答案: