Question

我无法想出这个。我有一组简单的div，包括标题，侧边栏和内容区域。标题是全宽，侧面和内容向左浮动。

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

是什么让<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：

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

Answer 1

看起来你有浮动：左边应用你的孩子。使用此代码：

html, body {
    overflow: auto;
}

Answer 2

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

html { overflow-y:scroll; }

Answer 3

尝试添加

body {
  min-height: 100%;
}

Answer 4

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

Answer 5

有两个问题：

<强>首先
元素的宽度大于页面宽度的100％
这就是为什么你的 div id =“body”会卡在侧边栏下面。

尝试使身体宽度达到30％，你应该明白我的意思。

<强>第二
height：100％实际上并不像看起来那样有解决方法。
Here is a great solution

Answer 6

不确定这是否会对任何人有所帮助，但我遇到了同样的问题，但仅限于移动设备。我发现有一种样式html { height: 100%; }导致身体没有延伸到整个高度。一旦我删除了html标签上的100％高度，它就固定了主体没有在移动设备上扩展页面的整个高度。身体标签上仍然有100％的高度。

Answer 7

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

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

身高不足100％页面高度

7 个答案: