全高侧栏和粘脚页面布局的内容

我有一个简单的页面环绕布局，其中包含顶层菜单，并且在它之后有一个左边栏和一个内容div。为了使布局具有粘性页脚，页面div被放在页面包div之后。全高侧栏和粘脚页面布局的内容

此布局应具有以下功能：
1.它具有粘性页脚，因此即使内容div中的文本较少，页脚仍保留在浏览器的底部。
2.侧栏是响应式的，所以我会用媒体查询来改变它的宽度。现在它有宽度80px。内容div现在应该填充剩余宽度，当我通过媒体查询更改侧边栏的宽度时。
3.如果css与Twitter Bootstrap 3 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>

来源

2014-10-11 Ali

那么你尝试过什么？显示表，浮动，jQuery，Flex。 – Christina 2014-10-11 14:59:19

是的，克里斯蒂娜我试图浮动，显示内联，表等等和在这个网站上的几个建议，但它造成了一些问题，因为本网站上的所有以前的解决方案没有考虑到粘滞的页脚布局。当我尝试这些解决方案时，侧栏会溢出页脚，有时页脚会出现在浏览器底部上方约55px的位置。请注意，此布局需要具有class clear的div。如果删除拳头，则.content（黄色）与侧栏（红色）重叠。 – Ali 2014-10-11 16:23:47

你可以尝试使用在你的CSS calc()：

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

来源

2014-10-11 14:08:48 proPhet

完美的作品！ :)，为了完成答案中的问题，我还将建议的CSS添加到内容类中，例如：div.side-bar，div.content {height：calc（100vh - 105px）; // 55px将会是您site_footer的高度 }，谢谢 – Ali 2014-10-11 16:08:48

完美的作品！ :)，为了在答案中完成问题，我还将建议的CSS添加到.content类中，并且由于顶部菜单高度是50px，所以55px应该是105px（50 topmenu + 55 footer），这将使垂直滚动条消失： div.side-bar，div.content { height：calc（100vh - 105px）; // 55px + 50px顶部菜单将成为您的site_footer和顶部菜单的高度 } – Ali 2014-10-11 16:14:45

但是仍然存在一个问题，如果.content中的文本增加，则页脚显示为固定（始终保留）在浏览器底部，有没有进一步修复？谢谢 – Ali 2014-10-11 16:31:33

全高侧栏和粘脚页面布局的内容

回答

相关问题