Question

我有一个侧边栏，里面有一些文字和一个页脚（贴在侧边栏的底部）。当我将窗口的高度调整（缩小）到例如一半，页脚在侧栏中的其他文本之上。有没有办法设置一个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>

Answer 1

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

Answer 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;  
}

具有上边距的绝对CSS定位

2 个答案: