javascript - div の高さをページの残りの高さに設定する

Question

この質問に対して複数の回答が見つかりましたが、特に CSS の方法では、すべてが機能していないようです。jQuery メソッドに移行しましたが、どちらも機能しません。

現在、ヘッダーとコンテンツ div の 2 つの div があります。ヘッダーの高さは 120px です。コンテンツ div をヘッダーの下に配置し、残りの高さを画面に合わせたいと思います。複数の回答が見つかりました。それらの方法を実装しようとしましたが、それでも機能しませんでした。だからこそ、私はこの質問をしているのです。

これが私の現在のコードです：

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    var one = $('#header').height(),
    two = parseInt($(window).height() - one);
    $('#border').height(two)
</script>

<div class="header" id="one">hi</div>
<div class="border" id="two">hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br><div>

CSS:

body {
    margin: 0;
    background-image:url(../images/bg.png);
    background-repeat:repeat;
    color: #FFFFFF;
    height: 100%;
}

.header
{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 120px;
    background-color: black;
    box-shadow: 0px 0px 40px #000000;
}

.border
{
    position: absolute;
    left: 25%;
    z-index:0;
    top: 120px;
    width: 50%;
    background-color: white;
    color: black;
    padding: 5px;
    overflow-y:scroll;
}

ありがとう！

Answer 1

これを試して

<div class="header" id="one">hi</div>
<div class='border' scrolling="auto" style="width: 100%;height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%" id="two">

Answer 2

私の知る限り、これを達成するには

純正css使用position:absolute。

そしてjQueryの助けを借りて

私はあなたの問題を両方の方法で解決しました 以下の解決策をチェックしてください

コードを確認したところ、いくつかのバグが見つかりました

1.htmlコード内で を閉じるのを忘れています<div id="two">。 * 2.あなたのcssコードheight:100%では、反映しているクラスに適用しました。* 3.jQueryコードで高さを設定しようとしていますが、セレクターが間違っています。それがあなたのコードが機能していない理由です

私の場合は、cssコード、htmlコード、jqueryコードを変更する必要があります。このフィドルをチェックしてくださいhttp://jsfiddle.net/yNg95/2/

ここにHTMLがあります

<div class="header" id="one">hi</div>
<div class="border" id="two">
    hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>
</div>

ここにcssコードがあります

*{margin:0; padding:0;}
body {
    background-image:url(../images/bg.png);
    background-repeat:repeat;
    color: #FFFFFF;
    overflow:hidden;
}

.header{
    position: absolute;
    left: 0;
    top: 0;
    right:0;
    height: 120px;
    background-color: black;
    box-shadow: 0px 0px 40px #000000;
}

.border{
    position: absolute;
    left: 25%;
    z-index:0;
    width: 50%;
    top:120px;
    /*height: 100%;*/
    background-color: white;
    color: black;
    padding: 5px;
    overflow-y:scroll;
}

ここにjqueryコードがあります

var one, two;
    one = $('.header').outerHeight(true);
    two = $(window).height() - one;
    console.log(one, two)
    $('#two').css({height : two})

これは、純粋な別のオプションのフィドルですcss

http://jsfiddle.net/sarfarazdesigner/neR4U/

Answer 3

height: 100%;「ボーダー」クラスに追加するだけではどうですか？

http://jsfiddle.net/yNg95/1/

Answer 4

height: 78%;ボーダー css に追加height: 20%;し、ヘッダー css に追加します。デモ