Question

我有一个简单的页面包装布局，其中包含顶部菜单，后面是左侧边栏和内容div。为了使布局具有粘性页脚，页脚div放在页面换行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>

Answer 1

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

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

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

1 个答案: