Question

我有一个包含以下基本布局的页面：

<body>
   <div id="header"></div>
   <div id="wrapper ">
      <div id="sidebar-container"><div id="sidebar"></div></div> 
      <div id="content"></div>
   </div>
<div id="footer"></div>
</body>

css是这样的：

#wrapper {
    clear: both;
    float: left;
    width: 100%;
    height: auto;

}

#sidebar-container {
    float:left;
    width: 10%;
    height: 100%;
    min-height: 500px;
    padding: 20px 0px 20px 0px;
    background-color: green;
}

#sidebar {
    width:100%;
    height: 100%;
    background-color: green;
}

#content {
    float: left;
    width: 90%;
    height: 100%;

}

#footer {
    clear: both;
    position: absolute;
    width: 100%;
    bottom: 0;
    margin: 0 auto;
    height: 100px;
    background: url("footer.jpg") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
}

目前，＃sidebar-container和#content的内容决定了#wrapper的高度。我希望将#wrapper中的div扩展到页脚，该页脚位于浏览器窗口的底部。有关如何做到这一点的任何建议？谢谢。

Answer 1

如果您支持IE9 and up，则可以使用calc。

#wrapper {
  position: relative;
  height: calc(100% - {yourFooterHeight}px);
}
#wrapper > * {
  height: 100%;
}

示例

＆＃13;
＆＃13;
body, html { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; } #wrapper { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 100px); } #wrapper > * { height: 100%; } #content { background-color: #ebd24b; } #footer { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background-color: #000; }
＆＃13;
<div id="wrapper"> <div id="content"></div> </div> <div id="footer"></div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

根据我的理解，您可能需要使用position: fixed作为侧边栏和内容。对于没有height: 100%或fixed位置的元素，absolute不起作用。

您必须更新其他一些样式，例如删除浮动等，但我相信您要做的事情需要固定或绝对定位。点击此处了解有关差异的更多信息：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

此外，我建议调查footer和header等语义HTML标记。这不会影响这里的布局，但养成习惯会很好。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list

Answer 3

这可能是一个挑战，因为您的内容和侧边栏没有任何关系，即两者都在同一级别。您需要让其中一个成为另一个的父级，或者您需要编写一些JS。您可以在纯CSS中使用伪元素，但实质上您仍然需要其中一个“引导”，因为某些元素需要是框大小关系主文件。

示例，在Angular中我使用以下指令。然后，您可以使用右侧列的最小高度来保持最小高度，之后它将自动调整左侧（侧边栏）以匹配内容区域：

mmeMain.directive('mirror', function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attr) {
            scope.$watch(function () {
                angular.element(document.getElementById(attr.mirrorReflect)).height(elem.height()-85);
            });
        }
    };
});

HTML

<div id="leftColumn" class=sidebar col-xs-6 ">
 // html code 
</div>

<div id="rightColumn" class="content  form-column col-xs-6"  mirror mirror-reflect="leftColumn" >
 // html code
</div>

使侧边栏和内容扩展到粘性页脚

3 个答案: