CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dylan Cross
Dylan Cross

Reputation: 5986

Anyway to make body scrollbar appear if absolute position element goes below screen?

Is there any way to do this? I don't want the content to go below the screen without it being scrollable. (This is for people who may have smaller screens than most)

Upvotes: 0

Views: 800

Answers (3)

Peter-Paul van Gemerden
Peter-Paul van Gemerden

Reputation: 7011

NB: Levi Putna is right in pointing out that this behaviour only occurs if the <div> is empty.

Two options:

  1. You could set a min-height and min-width the <body>.
  2. You could set height on the <body> using JavaScript when the window is resized.

Setting min-height and min-width:

For example, if the absolutely positioned <div> is 400 × 300 pixels:

body {
    min-height: 400px;
    min-width: 300px;
}

Limitations:

  • Internet Explorer 6 lacks support for this, although there are easy hacks to fix that. At this point, min-height works in practically every other browser out there.
  • There is no way to accomodate a dynamically sized <div>, expect by overcompensating.

Dynamically setting height (when window is resized):

Given an absolutely positioned <div> of 400 × 300 pixels, positioned at [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 the <div>'s dimensions or position are variable:

var $win = $(window);
var $div = $('#thediv'); // the 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 and outerWidth, padding and border are included. By using offset (instead of the CSS top and left, the position is taken relative to the document, not to the offset parent.

Upvotes: 2

Levi Putna
Levi Putna

Reputation: 3073

From what I understand this is what you are doing:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Insert title here</title>
    </head>
    <body>
        <div id="scroll-div" style="position:absolute; height:2000px;"></div>
    </body>
</html>

and expecting to get a scrollbar? From what I understand the browser won’t render the div or at least the scroll bar until you add some content.

If you simply add some content to the div (scroll-div) you will get the scroll bar.

Upvotes: 3

Hemesh Singh
Hemesh Singh

Reputation: 1165

Use $(window).resize(function(){...}); if you are using jquery or simply <body onresize="myResize()" > for native javascript.

Upvotes: 1

Related Questions