html页面高度不够,关于html：正文高度未填充页面高度的100％

我不知道这一点。 我有一组简单的div，其中包含标题，侧边栏和内容区域。 标头为全角，侧面和内容向左浮动。

我需要侧边栏(用于背景)填充100％的页面高度，但是当我检查chrome中的元素时，实际上实际上在页面底部之前结束了，这似乎限制了我的高度 侧边栏。

是什么导致不能在此处填充整页？

?

• Home

• Users

  • Manage users

  • Add a user

• Clients

  • Manage clients

  • Add a client

• Projects

  • Manage projects

  • Create a project

  • Submitted projects

  • Closed projects

• Account
• Help

        Help

Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.

CSS：

* {

margin:0;

padding:0;

}

html, body {

height:100%;

font-family:Arial, Helvetica, sans-serif;

font-size: 12px;

line-height: 160%;

position: relative;

background: #000;

}

#sidebar{

width: 200px;

background: #000;

height: 100%;

padding-top: 30px;

-webkit-box-shadow: inset -4px 0px 8px 0px rgba(0, 0, 0, 0.5);

box-shadow: inset -4px 0px 8px 0px rgba(0, 0, 0, 0.5);

float: left;

}

#body{

float: left;

padding: 30px 0 30px 40px;

width: 75%;

}

有用吗？ stackoverflow.com/questions/1622027/

看起来您的孩子上有float：left。使用此代码：

html, body {

overflow: auto;

}

我也有同样的问题; 它是如此烦人..我尝试了溢出但没有用...您能看一下omarhabash.com/wp/?page_id=54。

您正在为这个答案赢得一枚金牌，我在寻找年龄！ 谢谢。

就像魅力，但我会让你

这使内部滚动条出现！

如有疑问，我发现解决此问题的最佳方法是添加：

html { overflow-y:scroll; }

尝试添加

body {

min-height: 100%;

}

您似乎正在尝试实现一个跨容器整个高度的布局-这些布局是不可能的。您应该阅读Faux Columns CSS技术，这是解决此问题的常用方法。

不知道这是否可以帮助任何人，但我遇到了同样的问题，但仅限于移动设备。我发现存在一种样式html { height: 100%; }，该样式导致主体无法扩展整个高度。一旦我删除了html标记上的100％高度，它便固定了主体，没有在移动设备上扩展页面的整个高度。我的身高标签上仍有100％的身高。

对我来说就是这样，我不知道它是如何工作的，但是我认为html的高度受到页面第一次加载时的窗口视口大小的限制。

有两个问题：

第一：

元素的宽度大于页面宽度的100％

这就是为什么您的div id =" body"卡在侧边栏下方的原因。

尝试使身体的宽度大约为30％，您应该明白我的意思。

第二：

height：100％似乎并没有解决问题的方法。

这是一个很好的解决方案

我试过了，在主体内，content div内和body div内放了一个透明的，它没有效果

我有机会仔细研究了您的代码并更新了答案。 让我来看看是否适合您。

请明智地使用此答案，在许多情况下我无济于事：

html, body{min-height:100%;}

body{height:100vh;}

谢谢，对我来说很好，但是您能告诉我什么是VH吗？

VH表示：查看端口高度。 从视口高度开始，每个(1vh)=(1％)。 以下链接将对其进行很好的解释：sitepoint.com/css-viewport-units-quick-start