html - 画面の高さに合わせてWebページの高さを調整する方法

Question

スクロールせずに画面サイズの高さに合わせてWebページの高さを調整する必要があります。

HTML

<body>
    <form id="form1" runat="server">
    <div id="main">
        <div id="content">

        </div>
        <div id="footer">

        </div>
    </div>
    </form>
</body>

CSS

#content{ background-color:#F3F3F3; margin:auto;width:70%;height:700px;}
#footer{width:100%;background-color:#666666;height:200px;}

score 29 · Accepted Answer

インラインCSSを使用し、jQueryを必要としない、迅速でエレガントではないが機能するスタンドアロンソリューション。AFAIKそれはIE9からも動作します。

<body style="overflow:hidden; margin:0">
    <form id="form1" runat="server">
        <div id="main" style="background-color:red">
            <div id="content">

            </div>
            <div id="footer">

            </div>
        </div>
    </form>
    <script language="javascript">
        function autoResizeDiv()
        {
            document.getElementById('main').style.height = window.innerHeight +'px';
        }
        window.onresize = autoResizeDiv;
        autoResizeDiv();
    </script>
</body>

score 26 · Accepted Answer

固定ポジショニングはあなたが必要とすることをします：

#main
{         
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}

score 24 · Accepted Answer

ここで説明した別の人のように、あなたがする必要があるのは追加することだけです

height: 100vh;

画面を埋めるために必要なもののスタイルに

score 5 · Accepted Answer

正確な高さではなく、相対的な高さを指定して、合計で100％にします。例えば：

  #content {height: 80%;}
  #footer {height: 20%;}

加える

 html, body {height: 100%;}

score 0 · Accepted Answer

試す：

#content{ background-color:#F3F3F3; margin:auto;width:70%;height:77%;}
#footer{width:100%;background-color:#666666;height:22%;}

（77％と22％は、との比率を大まかに保持し、contentスクロールfooterを引き起こしてはなりません）

score 0 · Accepted Answer

cssを使用して、bodyタグを次の設定に設定できます。

body
{
padding:0px;
margin:0px;
width:100%;
height:100%;
}

score 0 · Accepted Answer

これを使用して、クラス「ホーム」を自分のクラスに置き換えます

(function ($) {
    $(function(){"use strict";
        $('.home').css({'height':($(window).height())+'px'});
        $(window).resize(function(){
        $('.home').css({'height':($(window).height())+'px'});
        });
    });
  
  })(jQuery);

score 0 · Accepted Answer

重要なものを追加して、元のスタイルを上書きしてください。

height: 100vh !important;

html - 画面の高さに合わせてWebページの高さを調整する方法

8 に答える 8

Related

Reference