我无法想出这个.我有一组简单的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%;
}
Tim*_*yen 46
看起来你有浮动:左边应用你的孩子.使用此代码:
html, body {
overflow: auto;
}
moh*_*man 11
请明智地使用此答案，在许多情况下我无能为力：
html, body{min-height:100%;}
body{height:100vh;}
不确定这是否会对任何人有帮助，但我也遇到了同样的问题，但仅限于移动设备。我发现有一种风格html { height: 100%; }导致身体无法延伸到整个高度。一旦我删除了 html 标签上的 100% 高度，它就修复了正文，使其不延伸移动设备上页面的整个高度。我的 body 标签上仍然有 100% 的高度。