1. ホーム
  2. 質問と答え
  3. 絶対位置要素が画面の下になると、本文スクロールバーが表示されますか？

絶対位置要素が画面の下になると、本文スクロールバーが表示されますか？

2012-01-18 5 views
0

これを行う方法はありますか？私は、スクロール可能でなければコンテンツが画面の下に来ることを望んでいません。 （これは、ほとんどのより小さな画面を有することができる人々のためである）絶対位置要素が画面の下になると、本文スクロールバーが表示されますか？

出典

2012-01-18 Dylan Cross

+0

水平または垂直（またはその両方）を意味しますか？問題を実証できますか？ http://jsfiddle.net//http://jsbin.com/ – thirtydot

+0

Vertical。ちょうど私が何を意味するかを見るために現在の画面の高さよりも高い高さの絶対配置されたdivを作ってください（私はこの時点で私のラップトップから離れているか、デモンストレーションします） –

答えて

2

NB：レヴィPutna <div>が空の場合、この動作がのみ発生することpointing outに右です。

つのオプション：

  1. あなたがmin-heightとmin-width<body>を設定することができます。
  2. <body>には、ウィンドウのサイズが変更されたときにJavaScriptを使用してheightを設定できます。
    3. min-heightと min-width設定

：

例えば、絶対位置 300画素である場合：

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

制限：
  • Internet Explorer 6 はこれをサポートしていません、これを修正するのは簡単なハックですがこの時点で、min-heightは実際にそこの他のすべてのブラウザで動作します。
  • 動的にサイズを調整する方法はありません<div>、過補償によって予想されます。

    [0,0]に位置する絶対位置 400の画素を考える：

    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 
    }); 
});
    動的（ウィンドウのサイズが変更されている）height設定
    •

<div>の寸法または位置が可変である場合：

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 
    }); 
});

outerHeightとouterWidthを使用すると、パディングとボーダーが含まれます。あなたはjqueryのまたはネイティブのjavascriptのために単に<body onresize="myResize()" >を使用している場合、代わりにCSS topとleftの（offsetを使用することにより、位置がないoffset parent。

出典

2012-01-18 12:15:54 PPvG

+0

私はラップトップに戻るときに。 （私はIE 6以前については心配していませんが、それより前にサポートしないことを選択しています。私のサイトではソケットioを多く使用しています。それ以上のサポートはありません。 –

+0

あなたが満足すればJavaScriptを使用してこれを修正するには、ウィンドウのサイズを変更したときに 'body'高さを絶対に配置された' div'の高さに設定する必要があります。 – thirtydot

+0

ウィンドウのサイズ変更を検出するにはどうすればいいですか？ –

1

使用$(window).resize(function(){...});に、文書に対して取られます。

出典

2012-01-18 12:47:44

3

私は、これはあなたが何をしているかであることを理解するものから： 

<!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>
をしてスクロールバーを取得するために期待？あなたがいくつかのコンテンツを追加するまで、ブラウザはdivまたは少なくともスクロールバーをレンダリングしません。

div（scroll-div）にコンテンツを追加するだけでスクロールバーが表示されます。

出典

2012-01-18 13:28:18

+0

+1 OPの質問に対する答えです。私が盲目的にこれがdivの位置によって引き起こされたと仮定していたことを実現してくれてありがとう... :-) – PPvG

関連する問題

 関連する問題