web-dev-qa-db-ja.com

divに100%の高さを適用する方法は?

最後の3番目のdivを残りのスペース全体に埋めるようにしたい。 100%の高さを指定しましたが、表示したくないスクロールバーが表示されます。私は同じためのCSSソリューションがあります。 CSSからできない場合は、jQuery/JSソリューションで問題ありません。

<html style="height:100%">
<head>
    <style type="css">
        html , body {
            width:100%; height:100%;
            padding:0px;
            margin:0px;
        }
    </style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
    <div style="height:100%;width:100%">
        <div style="height:100px;background-color:#ddd">&nbsp;</div>
        <div style="height:25px;background-color:#eee">&nbsp;</div>
        <div style="display:block;height:100%;background-color:#ccc">&nbsp;</div>
    </div>
</body>
</html>
18
Wasim Shaikh

JQueryでは、次のようなことを試すことができます。

$(function() {
    $(window).resize(function() {
        $('div:last').height($(window).height() - $('div:last').offset().top);
    });
    $(window).resize();
});

ウィンドウのサイズが変更されるたびに、最後のdivの高さが変更され、divがページの下部まで拡張されます。ウィンドウのサイズ変更メソッドがページの読み込み時に呼び出されるため、divはすぐにサイズ変更されます。

ウィンドウの高さからdivの上部オフセットを差し引くと、利用可能な最大の高さが残ります。マージンがあり、パディングの境界が適用されている場合、減算される値を調整する必要があります。次に例を示します。

$('div:last').height($(window).height() - $('div:last').offset().top - 30);

ウィンドウの下部から30pxのdivが必要だとします。

23
Tatu Ulmanen

最新のブラウザー:set position: relativeコンテナ上divposition: absoluteは3番目のdivにあります。次に、コンテナの上部と下部に同時に配置できます:top: 0pxbottom: 0px;

6
Joó Ádám

あなたの目標が底を塗りつぶすことであるなら、単にそれについて心配しないでください。

外側のdivの色を設定し、3番目のdivでコンテンツの必要に応じて高さを変更します。

<html style="height:100%">
<head>
    <style type="css">
        html , body {
                width:100%; height:100%;
                padding:0px;
                margin:0px;
        }
    </style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
    <div style="height:100%;width:100%;background-color:#ccc">
        <div style="height:100px;background-color:#ddd">&nbsp;</div>
        <div style="height:25px;background-color:#eee">&nbsp;</div>
        <div style="">&nbsp;</div>
    </div>
</body>
</html>
0
Kales

プロパティ「高さ:100%;」は、特定のdivに利用可能な画面スペースを100%使用するようにブラウザに指示します。つまり、ブラウザは、ブラウザスペースのサイズをチェックし、その中に要素があるかどうかをチェックせずにCSSエンジンに返します。

ここで当てはまると思われる唯一の回避策は、Davidが提供するソリューションを使用して 'position:absolute;下:0; 'そのdivの。

0
Matthew Morek
window.onload = setHeight
window.onresize = setHeight
function setHeight() {
    document.getElementById('app').style.height = window.innerHeight  + "px"
}
0
develdoe
$(window).resize(function(){
        $('.elastic').each(function(i,n){
        var ph = $(this).parent().height();
        var pw = $(this).parent().width();
        var sh = 0; 
        var s = $(this).siblings().each(function(i,n){
            sh += $(this).height();
        })
        $(this).height(ph-sh);
        sh = 0, ph = 0, s=0;

    }); 
});

スクリプトタグまたは外部JavaScriptに以下を追加します。それから変える

ウィンドウのサイズを変更すると、自動的に高さが下部の使用可能なスペースに合わせられます。 divはいくつでも持つことができますが、その親の内部にはエラスティックを1つだけ含めることができます。複数のエラスティックを計算するのに煩わされませんでした:)

0
Val

含まれているDIVのオーバーフローを非表示にすることができます。

<html>
<head>
    <style>
        *{margin:0;padding:0;}
        html,body{height:100%;}
    </style>
</head>
<body>
    <div style="overflow:hidden;height:100%">
        <div style="height:100px;background-color:#ddd"></div>
        <div style="height:25px;background-color:#eee"></div>
        <div style="height:100%;background-color:#ccc">&nbsp;</div>
    </div>
</body>
</html>

この手法を使用してウィンドウのサイズを変更すると、コンテンツが消えることがあることに注意してください。

0
David Hellsing

少し醜いですが、うまくいきます。

 <html style="height:100%">
    <head>
        <style type="css">
            html , body {
                    width:100%;
                    height:100%;
                    padding:0px;
                    margin:0px;
            }
        </style>
    </head>
    <body style="height:100%;padding:0px;margin:0px;">
        <div style="width:100%;height:100%;">
            <div style="width:100%;height:100px;background-color:#ddd;">&nbsp;</div>
            <div style="width:100%;height:25px;background-color:#eee;">&nbsp;</div>
            <div style="width:100%;height:100%;background-color:#ccc;margin-bottom:-1000em;padding-bottom:1000em;">&nbsp;</div>
        </div>
    </body>
 </html>
0
$(document).ready(function() {
    var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
    $("#thirdDiv").height(heightToFill);

    $(window).resize(function(){  var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
    $("#thirdDiv").height(heightToFill);
});

これは、ブラウザのサイズが変更された場合に備えてください...

0
L i

これが私が行った小さなjqueryの修正です:

<html>
<head>
<title>test</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
        $("#thirdDiv").height(heightToFill);
    });
</script>
</head>
<body style="height: 100%; padding: 0px; margin: 0px;">
<div id="parentDiv" style="height: 100%; width: 100%; position:absolute;">
    <div id="firstDiv" style="height: 100px; background-color: #ddd">
        &nbsp;</div>
    <div id="secondDiv" style="height: 25px; background-color: #eee">
        &nbsp;</div>
    <div id="thirdDiv" style="background-color: #ccc;">
        &nbsp;a</div>
</div>
</body>
</html>
0
Jronny

純粋なCSSを使用できますheight:100%(ここで100%はウィンドウ内の可視領域の高さ)DOCTYPEをまったく使用しないか、IE障害のあるHTML 4.0 DOCTYPE(.dtd urlなし)を使用することによる互換モードの値

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body style="margin:0; padding:0; overflow:hidden;">
<div style="height: 100%; background: red"></div>
</body>
</html>

<!DOCTYPE..完全に、それでも同じ効果があります。 overflow:hidden bodyスタイルの宣言は、IEで空のスクロールバーを取り除くことです。ただし、これはquirksモードであることを忘れないでください。これは、予測不可能な領域にいることを意味します。CSSボックスモデルはブラウザごとに異なります。

0
Andris

また、垂直方向に繰り返される背景画像をCSSに追加することで、偽の列を使用して、列がスペースに表示されるようにすることもできます。この画像は、3つの列をラップするdivまたはbodyタグに追加できます。

これらの列にコンテンツが含まれる場合は、列の動作が異なるため、いくつか追加する価値があります。

0
matpol