固定边栏太高的浏览器（底部被截断） [英] Fixed sidebar too tall for browser (bottom is getting cut off)

问题描述

假设我有一个固定的侧边栏（XXpx高）（请参阅 http://www.getskeleton.com/ 如果你想要一个视觉的我的意思）。边栏看起来就像我想要的，只要浏览器的高度大于边栏。但是，当浏览器高度缩小到侧边栏的高度以下时，底部内容被截断。

最初，侧边栏有 position：fixed ，但如果浏览器太小而不能包含整个边栏，我想把它改为 position：aboslute 。基本上，我想使它这样的页面加载和任何时间用户调整大小完成调整页面大小它将检查，以确保底部内容不被切断，然后分配适当的 $

$

$

b $ b

  var $ sidebar = $（'＃idOfSidebar'）
，$ w = $（window）; 
 $ w.resize（function（）{
 var pos = $ w.height（）< $ sidebar.height（）？'absolute'：'fixed'; 
 $ sidebar。 css（{position：pos}）; 
}）; 
  

Let's say I have a fixed sidebar that is XXpx tall (Refer to http://www.getskeleton.com/ if you want a visual of what I mean). The sidebar looks exactly the way I want, as long as the height of the browser is bigger than the sidebar. However, when the browser height shrinks below the height of the sidebar, the bottom contents get cut off.

Initially, the sidebar has position: fixed, but if the browser gets too small to contain the entire sidebar, I want to change it to position: aboslute. Essentially, I'd like to make it so on both page load and any time the user resizes finishes resizing the page it will check to make sure that the bottom content isn't being cut off, then assign the appropriate position attribute.

解决方案

Do something like this:

var $sidebar = $('#idOfSidebar')
    ,$w = $(window);
$w.resize(function () { 
  var pos = $w.height() < $sidebar.height()? 'absolute': 'fixed'; 
  $sidebar.css({position: pos});
});

这篇关于固定边栏太高的浏览器（底部被截断）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！