35

我想不通这个。我有一组简单的 div，带有标题、侧边栏和内容区域。标题是全宽的，侧面和内容向左浮动。

我需要侧边栏（用于背景）填充 100% 的页面高度，但是当我检查 chrome 中的元素时，<body>实际上在页面底部之前很久就结束了，这似乎限制了我的侧边栏的高度。

是什么阻止了<body>这里填满整个页面？

    ​&lt;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：

* {
    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%;
}
4

7 回答 7

62

看起来你已经float:left申请了你的孩子。使用此代码：

html, body {
    overflow: auto;
}
于 2013-12-27T21:20:05.440 回答
16

请明智地使用这个答案，在很多情况下我无能为力：

html, body{min-height:100%;}
body{height:100vh;}
于 2019-08-21T08:19:38.017 回答
9

尝试添加

body {
  min-height: 100%;
}
于 2012-11-11T00:48:55.727 回答
8

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

html { overflow-y:scroll; }
于 2013-07-30T19:22:28.337 回答
6

不知道这是否会帮助任何人，但我遇到了同样的问题，但只在移动设备上。我发现有一种风格html { height: 100%; }导致身体无法伸展整个高度。一旦我删除了 html 标记上的 100% 高度，它就修复了正文，而不是在移动设备上扩展页面的整个高度。我的身体标签上仍然有 100% 的高度。

于 2017-08-25T18:56:39.760 回答
3

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

于 2012-11-11T01:12:58.130 回答
2

有两个问题：

首先：
元素的宽度大于页面宽度的 100%
这就是为什么div id="body"卡在侧边栏下方的原因。

尝试将身体的宽度设置为 30%，你应该明白我的意思。

第二：
height:100%并没有像看起来有解决方法那样真正起作用。
这是一个很好的解决方案

于 2012-11-11T00:57:53.150 回答