Reputation: 8599
I have an element that I need to dynamically change his size depending on the screen resolution, so far I have a fixed size which is .scroll-sidebars { max-height: 650px; }
but this only works in big screens, as you see in the img below, there is a little margin on the bottom, that's what I want
if I use that same height on smaller screens, this is what I get
so I want to avoid that, it doesn't matter that once the height of that panel changes appears a scroll bar on the panel, that is good, all I need is to keep that margin always there at the bottom.
I have a directive, this is an sticky sidebar, I do not know if its helps because maybe we can calculate that height from the directive
.directive('sticky', function($document, $timeout) {
return {
restrict: 'A',
link: function(scope, element) {
var width = $document.width();
if (width > 991) {
$timeout(function() {
angular.element($document).ready(function() {
var stickySidebar = element,
stickyHeight,
sidebarTop,
scrollTop,
stickyStop,
sidebarBottom,
stopPosition;
if (stickySidebar.length > 0) {
stickyHeight = stickySidebar.height();
sidebarTop = stickySidebar.offset().top;
}
$document.scroll(function() {
if (stickySidebar.length > 0) {
scrollTop = $document.scrollTop() + 52; //stkicy responds to the navbar
if (sidebarTop < scrollTop) {
stickySidebar.css('top', scrollTop - sidebarTop);
sidebarBottom = stickySidebar.offset().top + stickyHeight;
stickyStop = $('.main-content').offset().top + $('.main-content').height();
if (stickyStop < sidebarBottom) {
stopPosition = $('.main-content').height() - stickyHeight;
stickySidebar.css('top', stopPosition);
}
}
else {
stickySidebar.css('top', '0');
}
}
});
$document.resize(function() {
if (stickySidebar.length > 0) {
stickyHeight = stickySidebar.height();
}
});
});
}, 1000);
}else {
console.log('do not apply function because the size is not the proper one');
}
}
};
});
and the html part
<div class="col-md-3">
<div sticky>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Sports</h3><br>
</div>
<div class="panel-group">
<div class="scroll-sidebars">
<accordion close-others="false">
<accordion-group ng-repeat="sport in sports">
<accordion-heading>
<div>
{{::sport.name}}
</div>
</accordion-heading>
<div>
{{::league.name}}
</div>
</accordion-group>
</accordion>
</div>
</div>
</div>
Upvotes: 1
Views: 831
Reputation: 635
You can use vh on your css, no need to use JS, however, if you need support for old browsers you'll need JS :(
.scroll-sidebars {
height: 100vh;
}
Upvotes: 1
Reputation: 28359
You could use the function calc
assuming you do not care about old browsers not supporting it :
.scroll-sidebars {
max-height: calc(100% - 50px);
}
The above rule will set the height to 100% of the container's height, minus 50px (adjust this value to your needs).
You could define a height according to the viewport height. The viewport is the visible portion of the document. Note that you can use it with these browsers. The following makes use of the vh
unit, which stands for viewport height.
.scroll-sidebars {
max-height: calc(100vh - 100px);
}
Upvotes: 1
Reputation: 136194
Instead of $document.resize()
use $window.onresize
which is pure javascript onresize
event. Before doing this add $window
dependency
CODE
$window.onresize = function() {
if (stickySidebar.length > 0) {
stickyHeight = stickySidebar.height();
}
};
Hope this could help you, Thanks.
Upvotes: 1
Reputation: 19
.scroll-sidebars { max-height: 90%; }
Defining a px number will always cause the section to take up that many pixels. No matter the screen size. so if I have a large screen with a low resolution, the same issue occurs.
When using percentages, the CSS uses the browser's height and width to determine how large to make the containing section.
Upvotes: 1