全高侧边栏和带有粘性页脚布局的内容答案

【问题标题】：Full height side bar and content with sticky footer layout全高侧边栏和带有粘性页脚布局的内容
【发布时间】：2014-12-06 13:41:50
【问题描述】：

我有一个简单的页面换行布局，其中包含顶部菜单，之后是左侧边栏和内容 div。为了使布局具有粘性页脚，页脚 div 放置在 page-wrap div 之后。

此布局应具有以下特点：
1. 它有一个粘性页脚，所以即使内容 div 中的文本较少，页脚仍然保留在浏览器的底部。
2. 侧边栏是响应式的，所以我将通过媒体查询来改变它的宽度。现在它的宽度为 80px。内容 div 现在应该填充剩余的宽度，当我使用媒体查询更改侧边栏的宽度时。
3. 拥有与 Twitter Bootstrap 3 css 不冲突的 css 真是太好了，我在这个网站上使用了它（虽然在这个例子中没有使用，我稍后会添加）。
4. 侧边栏（红色）和内容（黄色）应该填满浏览器的剩余高度，这是我目前的问题，希望您能帮忙。

我的布局是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>

【问题讨论】：

那么你有什么尝试？显示表格、浮动、jQuery、Flex。
是的，克里斯蒂娜我在这个网站上尝试了浮动、显示内联、表格等和一些建议，但它产生了一些问题，因为这个网站上所有以前的解决方案都没有考虑到粘性页脚布局。当我尝试这些解决方案时，侧边栏会溢出页脚，有时页脚会出现在浏览器底部上方约 55 像素处。请注意，此布局中需要具有类 clear 的 div。如果您删除第一个 .content(yellow) 重叠 .side-bar(red)。

标签： html css twitter-bootstrap

【解决方案1】：

您可以尝试在 CSS 中使用 calc()：

div.side-bar {
    height: calc(100vh - 55px); // 55px would be the height of your site_footer
}

【讨论】：

完美运行！ :) ，为了完成答案中的问题，我还将建议的 css 添加到内容类中，例如： div.side-bar , div.content { height: calc(100vh - 105px); // 55px 将是您的 site_footer 的高度 }，谢谢
完美运行！ :) ，只是为了完成答案中的问题，我还将建议的 css 添加到 .content 类中，并且由于顶部菜单高度为 50px，因此 55px 它应该是 105px（50 顶部菜单 + 55 页脚），这将使垂直滚动条消失： div.side-bar , div.content { height: calc(100vh - 105px); // 55px+50px 顶部菜单将是您的 site_footer 和顶部菜单的高度 }
但是还有一个问题，如果 .content 中的文本增加，页脚会在浏览器底部显示为固定（始终保持），还有其他解决方法吗？谢谢
@Sunny19 如果div.content 的height css 大于一定数量，您可以使用javascript 将posision:fixed 设置为posision:relative。如果它解决了您的问题，请接受上面的答案。另外，请将上述评论作为一个新问题发布，因为它超出了原来的范围:)
@Porphet JS 不是必需的解决方案！