Absolute CSS positioning with a top margin

Question

I have a sidebar with some text and a footer inside it (which sticks to the bottom of the sidebar). When I resize (reduce) the window's height to e.g. half, the footer goes on top of the other texts in the sidebar. Is there a way to have a margin-top for example, so that when the window get resized, the footer keeps its position at the bottom until it is about to go on top of other elements (before it)?

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

Please add a JSFiddle with this problem. Also, I don't see any Javascript in your pasted code, so you can just remove that as a tag. — Rvervuurt, May 04 '15 at 14:37

score 0 · Answer 1 · answered May 04 '15 at 16:47

0

You may add padding-bottom:40px; (example) to .sidebar-top or .sidebar-content, so there will be enough space for .sidebar-bottom

answered May 04 '15 at 16:47

Sergiy T.

1,433
1
23
25

score 0 · Accepted Answer · edited May 23 '17 at 11:58

I realized this functionality cannot be done only in CSS, we need Javascript for detecting window resize and then applying CSS attributes conditionally. Since I am already using Angular.js, I prefer an Angular.js way, but the same can be done in pure Javascript or jQuery.

Using scope.$watch in a custom directive, I can detect window resize, conditionally apply CSS to the footer element (using the ng-style directive on the footer) and finally calling scope.$apply() (in my directive) to force a digest.

The "demo 3" fiddle in the first answer to this question helped a lot. Here is my fiddle. The most relevant part is applying the custom directive ("resize") and ng-style to the footer element:

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

and the directive itself and the function 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();
        });
    }
});

And the default/initial style for the footer div:

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

Absolute CSS positioning with a top margin

2 Answers2