Html 使子元素的高度为主体元素的100%，主体元素的高度也为100%_Html_Css

Html 使子元素的高度为主体元素的100%，主体元素的高度也为100%

html css

Html 使子元素的高度为主体元素的100%，主体元素的高度也为100%,html,css,Html,Css,我试图使元素占据至少100%的浏览器窗口高度，但也可以扩展到任何内容。我还试图使其唯一的子元素也占据高度的100% 插图这就是目前正在发生的事情；案例A是问题所在，案例B按预期工作在案例A中，div.page-content（红色框）应该扩展到正文（蓝色框），但它没有代码这是我的 CSS html { height: 100%; } body { min-height: 100%; padding-top: 57px; } .page-content { heigh

我试图使

元素占据至少100%的浏览器窗口高度，但也可以扩展到任何内容。我还试图使其唯一的

子元素也占据

高度的100%

插图

这就是目前正在发生的事情；案例A是问题所在，案例B按预期工作

在案例A中，

div.page-content

（红色框）应该扩展到

正文

（蓝色框），但它没有

代码

这是我的

CSS

html {
  height: 100%;
}

body {
  min-height: 100%;
  padding-top: 57px;
}

.page-content {
  height: 100%;
}

Html

<html>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top"></nav>
    <div class="page-content">
      <div class="page-container"></div>
    </div>
  </body>
</html>

请注意，

nav

元素处于静态位置，因此不会影响布局

Body没有指定

高度

，因为我希望高度为

自动

，因此它可以延伸到内容，但我不希望高度小于浏览器窗口

Body的行为与预期的一样，是

div.page-content

只根据自己的内容调整大小，而不是延伸到

Body

的高度

有没有一种方法可以在不使用javascript的情况下实现所需的行为？

添加

溢出：可见至车身
，更改最小高度：100%至<代码>高度：100%
和身高

的编码>为100%至<代码>最小高度：100%用于。页面内容
跳过页面内容
，并使用正文
作为主容器，因此您可以跳过您面临的继承问题
范例

*{
框大小：边框框
}
html{
填充顶部：50px；
身高：100%；
背景：白色；
}
身体{
最小高度：100%；
背景：绿松石；
边缘：0.2米；
边框：实心；/*再见*/
}
导航{
位置：固定；
高度：50px；
排名：0；
左：2米；
右：2米；
背景：番茄；
}

保持身体
至高度：100%^AKA将body
中的min height
更改为height
。不太确定要查找什么，可能会将溢出向下移动到body@你怎么不知道我想要什么？就在我用画笔画的图片下面，我描述了我想在案例a中发生的事情。我指的是溢出时的行为…（边框、背景、body/html所在的位置。如果没有具体说明，那么从html继承100%高度的经典就是基本方法和答案：））body上的min height没有为div提供高度继承，而此解决方案导致案例B失败，因为body没有扩展以满足内容（因为body上的高度：100%
），我接受它，因为它通常用于我的目的。我真的只是希望div.page-content
的大小合适；身体可以做任何事。在上使用minheight:100%
。页面内容
就是诀窍，谢谢。