javascript - Anyway to make body scrollbar appear if absolute position element goes below screen? -
javascript - Anyway to make body scrollbar appear if absolute position element goes below screen? -
is there way this? don't want content go below screen without beingness scrollable. (this people may have smaller screens most)
nb: levi putna right in pointing out behaviour occurs if <div>
empty.
two options:
you setmin-height
, min-width
<body>
. you set height
on <body>
using javascript when window resized. setting min-height
, min-width
:
for example, if absolutely positioned <div>
400 × 300 pixels:
body { min-height: 400px; min-width: 300px; }
limitations:
internet explorer 6 lacks support this, although there easy hacks prepare that. @ point,min-height
works in practically every other browser out there. there no way accomodate dynamically sized <div>
, expect overcompensating. dynamically setting height
(when window resized):
given absolutely positioned <div>
of 400 × 300 pixels, positioned @ [0,0]:
var $win = $(window); $win.resize(function(){ var height = math.max(400, $win.height()); var width = math.max(300, $win.width()); $('body').css({ height: height, width: width }); });
or, if <div>
's dimensions or position variable:
var $win = $(window); var $div = $('#thediv'); // absolutely positioned div $win.resize(function(){ var offset = $div.offset(); var height = $div.outerheight() + offset.top; var width = $div.outerwidth() + offset.left; height = math.max(height, $win.height()); width = math.max(width, $win.width()); $('body').css({ height: height, width: width }); });
by using outerheight
, outerwidth
, padding , border included. using offset
(instead of css top
, left
, position taken relative document, not offset parent.
javascript jquery html css
Comments
Post a Comment