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

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

html css

Html 使边栏和内容扩展到粘性页脚,html,css,Html,Css,我有一个基本布局如下的页面： <body> <div id="header"></div> <div id="wrapper "> <div id="sidebar-container"><div id="sidebar"></div></div> <div id="content"></div> </div> <d

我有一个基本布局如下的页面：

<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>

目前#边栏容器和#内容的内容决定了#包装的高度。我希望将#wrapper中的div扩展到位于浏览器窗口底部的页脚。有什么建议吗？谢谢。

如果您支持，您可以使用

示例

body，html{
位置：相对位置；
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
#包装纸{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
高度：计算（100%-100px）；
}
#包装器>*{
身高：100%；
}
#内容{背景色：#ebd24b；}
#页脚{
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
高度：100px；
背景色：#000；
}

如果您支持，可以使用

示例

body，html{
位置：相对位置；
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
#包装纸{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
高度：计算（100%-100px）；
}
#包装器>*{
身高：100%；
}
#内容{背景色：#ebd24b；}
#页脚{
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
高度：100px；
背景色：#000；
}

据我所知，您可能需要在侧边栏和内容中使用

位置：fixed

。

高度：100%

不适用于位置为

固定

或

绝对

的图元

你将不得不更新你的一些其他风格，如删除浮动等，但我相信你要做的是需要固定或绝对定位。请在此处阅读有关差异的更多信息：

此外，我建议调查语义HTML标记，如

footer

和

header

。这不会影响这里的布局，但是养成习惯会很好

据我所知，您可能需要在侧边栏和内容中使用

位置：fixed

。

高度：100%

不适用于位置为

固定

或

绝对

的图元

你将不得不更新你的一些其他风格，如删除浮动等，但我相信你要做的是需要固定或绝对定位。请在此处阅读有关差异的更多信息：

此外，我建议调查语义HTML标记，如

footer

和

header

。这不会影响这里的布局，但是养成习惯会很好

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

例如，在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

这可能是一个挑战，因为您的内容和侧边栏没有关系，即两者处于同一级别。您需要让其中一个成为另一个的父对象，或者您需要编写一些JS。您可以在纯CSS中使用伪元素，但本质上您仍然需要使用其中一个“lead”，因为某些元素需要是框大小关系主元素
例如，在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
这个想法很有趣，但在实现时似乎不会产生任何效果。你能用你的网站结构创建一个JSFIDLE吗？我来看看为什么不行。谢谢，西蒙！我会看看是否能在我的页面代码中重现这个想法。似乎“position”属性可能是缺少的关键元素。将其设置为固定或绝对解决问题。再次感谢，Simon。这个想法很有趣，但在实现时似乎不会产生任何效果。你能用你的站点结构创建一个JSFIDLE吗？我来看看为什么不行。谢谢，西蒙！我会看看是否能在我的页面代码中重现这个想法。似乎“position”属性可能是缺少的关键元素。将其设置为固定或绝对解决问题。再次感谢，西蒙。事实上，将“位置”设置为“固定”确实会使div以所需的方式拉伸。谢谢实际上，将“位置”设置为“固定”确实会导致div以所需的方式拉伸。谢谢
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);
            });
        }
    };
});

<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>