Html 正文高度未填充 100% 页面高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13327532/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
body height not filling 100% page height
提问by TH1981
I can't figure this one out. I've got a simple set of divs with a header, sidebar and content area. The header is full width, the side and content are floated left.
我无法弄清楚这一点。我有一组带有标题、侧边栏和内容区域的简单 div。标题是全宽，边和内容向左浮动。
I need the sidebar (for the background) to fill 100% of the page height, but when I inspect element in chrome, the <body>is actually ending long before the bottom of the page, which seems to be limiting the height of my sidebar.
我需要侧边栏（用于背景）来填充 100% 的页面高度，但是当我在 chrome 中检查元素时，<body>实际上在页面底部之前很久就结束了，这似乎限制了我的侧边栏的高度。
What is keeping the <body>from filling the full page here?
是什么阻止了<body>填满整个页面？
?<body>
<div id="head">
</div>
<div id="sidebar">
<div>
<div id="menu">
<ul>
<li><a href="/dashboard.php"><img src="/img/blank.png" alt="home" id="home_ico">Home</a>
</li>
<li class="admin"><a><img src="/img/blank.png" alt="home" id="users_ico">Users</a>
<ul class="submenu" style="display: none;">
<li><a href="/users">Manage users</a></li>
<li><a href="/users/add.php">Add a user</a></li>
</ul>
</li>
<li class=""><a><img src="/img/blank.png" alt="home" id="clients_ico">Clients</a>
<ul class="submenu" style="display: none;">
<li><a href="/client_orgs">Manage clients</a></li>
<li><a href="/client_orgs/add.php" class="admin">Add a client</a></li>
</ul>
</li>
<li class=""><a><img src="/img/blank.png" alt="home" id="projects_ico">Projects</a>
<ul class="submenu" style="display: none;">
<li><a href="/projects">Manage projects</a></li>
<li><a href="/projects/add.php" class="admin">Create a project</a></li>
<li></li>
<li><a href="/projects/submitted.php" class="admin client">Submitted projects</a></li>
<li><a href="/projects/closed.php" class="admin">Closed projects</a></li>
</ul>
</li>
<li class=""><a href="/my_account"><img src="/img/blank.png" alt="home" id="account_ico">Account</a>
</li>
<li class="active"><a href="/help.php"><img src="/img/blank.png" alt="help" id="help_ico">Help</a>
</li>
</ul>
</div>
</div>
</div>
<div id="body" class="full">
<div id="content">
<!--start block-->
<div class="block">
<h1><img src="/img/blank.png" alt="home" id="help_ico"> Help</h1>
<p>
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.
</p>
</div>
</div>
</body>
CSS:
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%;
}
回答by Tim Nguyen
Looks like you have float:left applied on your children. Use this code :
看起来您对您的孩子应用了 float:left 。使用此代码：
html, body {
overflow: auto;
}
回答by Erick
When in doubt - the best way I found to tackle this is by adding:
如有疑问 - 我发现解决此问题的最佳方法是添加：
html { overflow-y:scroll; }
回答by Hussein Negm
try adding
尝试添加
body {
min-height: 100%;
}
回答by mohammed Suleiman
Please use this answer wisely, I't could help in many cases:
请明智地使用此答案，在许多情况下我无能为力：
html, body{min-height:100%;}
body{height:100vh;}
回答by lflores
Not sure if this will help anyone but I had the same problem but only on mobile. I discovered that there was a style html { height: 100%; }that was causing the body to not extend the full height. Once I removed the 100% height on the html tag it fixed the body not extending the full height of the page on mobile. I still have 100% height on the body tag.
不确定这是否会帮助任何人，但我遇到了同样的问题，但仅限于移动设备。我发现有一种样式html { height: 100%; }会导致身体无法伸展整个高度。一旦我删除了 html 标签上的 100% 高度，它就会修复正文，而不是在移动设备上扩展页面的整个高度。我的身体标签上仍然有 100% 的高度。
回答by Wex
You seem to be trying to achieve a layout which spans the entire height of the container - these layouts are not posible. You should read up on the Faux ColumnsCSS technique, a common workaround to this problem.
您似乎正在尝试实现跨越容器整个高度的布局 - 这些布局是不可能的。您应该阅读Faux ColumnsCSS 技术，这是解决此问题的常见方法。
回答by Malkus
There are two problems:
有两个问题：
First:
The width of your elements is greater than 100% of the width of the page
This is why your div id="body"is getting stuck below the sidebar.
第一：
元素的宽度大于页面宽度的 100%
这就是为什么你的div id="body"卡在侧边栏下方。
Try making the width of the body something like 30% and you should see what I mean.
尝试将身体的宽度设置为 30%，您应该明白我的意思。
Second:
height:100%does not really work the way it would seem there are workarounds for this.
Here is a great solution
第二：
height:100%并没有像看起来有解决方法的那样真正起作用。
这是一个很好的解决方案
