我有一个简单的页面换行布局，其中包含顶部菜单，然后是左侧边栏和内容 div。 为了使布局具有粘性页脚，页脚 div 放置在 page-wrap div 之后。
此布局应具有以下特点:
1. 它有一个粘性页脚，所以即使内容 div 中的文本较少，页脚仍保留在浏览器底部。
2. 侧边栏是响应式的，所以我会用媒体查询改变它的宽度。现在它的宽度为 80px。内容 div 现在应该填充剩余的宽度，当我使用媒体查询更改侧边栏的宽度时。
3. 如果 css 与我在本网站上使用的 Twitter Bootstrap 3 css 不冲突(虽然未在此示例中使用，但我稍后会添加)，那将是非常好的。
4. sidebar(red) 和content(yellow) 应该填满浏览器的剩余高度，这是我目前的问题，希望得到您的帮助。
我的布局是here ! , 图像也是here !.
感谢帮助。
/* Sticky footer */
* {
margin: 0;
}
html, body {
height: 100%;
width: 100%;
/*overflow: hidden;*/
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -55px;
background-color: #18b7f1;
/*height: 100%;*/
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 55px;
}
.site-footer {
background: orange;
border-top: 1px solid #E7E7E7;
}
/* Layout */
.clear {
clear: both;
}
.top-menu {
background-color: green;
height: 50px;
width: 100%;
float: left;
}
.side-bar {
background-color: red;
width:80px;
float: left;
border:2px solid #FFF;
display: block;
height: 100%;
}
.content {
background-color: yellow;
border: 5px solid #000;
height: 100%;
overflow: auto;
}
/* This css is suggested by proPet which works fine now */
div.side-bar , div.content {
height: calc(100vh - 105px); // 55px+50px top menu would be the height of your site_footer and top menu
}<!DOCTYPE html>
<html>
<head>
<title>Two Col Layout</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="page-wrap">
<div class="top-menu"> Top menu</div>
<div class="clear"></div>
<div class="side-bar">
sidebar
</div>
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letrasetand mently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="clear"></div>
<div class="site-footer">
footer
</div>
</body>
</html>最佳答案
您可以尝试使用 calc()在你的 CSS 中:
div.side-bar {
height: calc(100vh - 55px); // 55px would be the height of your site_footer
}
关于html - 全高侧边栏和带有粘性页脚布局的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26315471/