带上边距的绝对 CSS 定位答案

【问题标题】：Absolute CSS positioning with a top margin带上边距的绝对 CSS 定位
【发布时间】：2015-05-04 14:30:24
【问题描述】：

我有一个边栏，里面有一些文本和一个页脚（它贴在边栏的底部）。当我将窗口的高度调整（减小）到例如一半，页脚位于侧边栏中其他文本的顶部。例如，有没有一种方法可以设置 margin-top，这样当窗口调整大小时，页脚会保持在底部的位置，直到它即将位于其他元素的顶部（在它之前）？

.sidebar {
  position: fixed;
  width: 260px;
  overflow-y: auto;
  border-right: 1px solid #dadada;
  display: inline-block;
  background-color: #BDE6CA;
  float: left;
  z-index: 3;
}
.sidebar-content {
  position: relative;
  height: 100%;
  width: 100%;
}
.sidebar-option {
  color: #00aa4f;
  font-size: 20px;
  cursor: pointer;
  padding: 20px 0px 20px 20px;
}
.sidebar-bottom {
  bottom: 0px;
  position: absolute;
  width: 100%;
  padding: 0px 40px 20px 0px;
  text-align: right;
}

<div class="sidebar max-height">
  <div class="sidebar-content">

    <div class="sidebar-top">
      <img class="sidebar-logo" src="http://lorempixel.com/50/50">
      <div class="sidebar-option">
        <img src="http://lorempixel.com/50/50">
        <span>Section 1</span> 
      </div>
      <div class="sidebar-option">
        <img src="http://lorempixel.com/50/50">
        <span>Section 2</span>
      </div>
    </div>

    <div class="sidebar-bottom">
      <div class="sidebar-text"><span>Sidebar footer</span>
      </div>
    </div>

  </div>
</div>

【问题讨论】：

请添加一个 JSFiddle 来解决这个问题。另外，我在您粘贴的代码中看不到任何 Javascript，因此您可以将其作为标签删除。

标签： javascript html css angularjs

【解决方案1】：

您可以将padding-bottom:40px;（示例）添加到.sidebar-top 或.sidebar-content，这样.sidebar-bottom 就有足够的空间

【讨论】：

【解决方案2】：

我意识到这个功能不能只在 CSS 中完成，我们需要 Javascript 来检测窗口调整大小，然后有条件地应用 CSS 属性。因为我已经在使用 Angular.js，所以我更喜欢 Angular.js 的方式，但同样可以在纯 Javascript 或 jQuery 中完成。

在自定义指令中使用 scope.$watch，我可以检测窗口调整大小，有条件地将 CSS 应用到页脚元素（在页脚上使用 ng-style 指令），最后调用 scope.$apply()（在我的指令中） ) 强制进行摘要。

this 问题的第一个答案中的“演示 3”小提琴帮助很大。 Here 是我的小提琴。最相关的部分是将自定义指令（“resize”）和 ng-style 应用于页脚元素：

<div class="sidebar-bottom" ng-style="changePosition()" resize>
      <div class="sidebar-text"><span>Footer Text 1</span></div>
      <div class="sidebar-text"><span>Footer Text 2</span></div>
</div>

以及指令本身和函数scope.changePosition()：

app.directive('resize', function ($window) {
    return function (scope, element, attr) {

        var w = angular.element($window);
        scope.$watch(function () {
            return {
                'h': window.innerHeight, 
                'w': window.innerWidth
            };
        }, function (newValue, oldValue) {
            scope.changePosition = function () {
                var pos ="";
                if (newValue.h < 440) {
                    pos = "relative"
                } else {
                    pos = "absolute"
                }
                return { 
                    'position': pos
                };
            };

        }, true);

        w.bind('resize', function () {
            scope.$apply();
        });
    }
});

以及页脚 div 的默认/初始样式：

.sidebar-bottom {
  bottom: 0px;
  position: absolute;  
}

【讨论】：