0

jsfiddle デモ

私は3つのdivを取得しました:

1 -<div id="header">赤色

2 - <div id="main">#FFF2D2color を使用

3 -<div id="footer">赤色

<div id="main">自動高さと自動オーバーフローが必要です。どうも

  <body>
    <div id="header">
      <h1>Well came to abc: Club</h1>
    </div>
    <div id="main">

<a href="index.php">&laquo; Back</a><br />
<br />

<h2>Log File</h2>

<p><a href="logfile.php?clear=true">Clear log file</a><p>

<ul class="log-entries">
</li><li>2012-06-20 10:13:18 | Login: aa logged in.
</li><li>2012-06-20 10:19:56 | Login:  logout.
</li><li>2012-06-20 10:22:14 | Login:  logged in.
</li><li>2012-06-20 10:22:16 | Login:  logout
</li><li>2012-06-20 10:26:58 | Login: dgf logged in.
</li><li>2012-06-20 10:26:59 | Login: 35 logout
</li><li>2012-06-20 10:28:03 | Login: aa logged in.
</li><li>2012-06-20 10:28:05 | Login:  logout
</li><li>2012-06-20 10:32:53 | Login: aa logged in.
</li><li>2012-06-20 10:32:55 | Login:  logout
</li><li>2012-06-20 10:35:54 | Login: aa logged in.
</li><li>2012-06-20 10:35:56 | Login: aa logout
</li><li>2012-06-20 10:36:58 | Login: rye logged in.
</li></li><li>2012-06-20 10:13:18 | Login: aa logged in.
</li><li>2012-06-20 10:19:56 | Login:  logout.
</li><li>2012-06-20 10:22:14 | Login:  logged in.
</li><li>2012-06-20 10:22:16 | Login:  logout
</li><li>2012-06-20 10:26:58 | Login: dgf logged in.
</li><li>2012-06-20 10:26:59 | Login: 35 logout
</li><li>2012-06-20 10:28:03 | Login: aa logged in.
</li><li>2012-06-20 10:28:05 | Login:  logout
</li><li>2012-06-20 10:32:53 | Login: aa logged in.
</li><li>2012-06-20 10:32:55 | Login:  logout
</li><li>2012-06-20 10:35:54 | Login: aa logged in.
</li><li>2012-06-20 10:35:56 | Login: aa logout
</li><li>2012-06-20 10:36:58 | Login: rye logged in.
</li>
    <li>2012-06-20 10:37:02 | Login: rye logout
</li><li>2012-06-20 10:39:03 | Login: aa logged in.
</li><li>2012-06-20 10:39:07 | Login: aa logout
</li><li>2012-06-20 10:44:49 | Login: aa logged in.
</li><li>2012-06-20 10:45:00 | Login: aa logout
</li><li>2012-06-20 10:46:10 | Login: aa logged in.
</li><li>2012-06-20 10:46:11 | Login: aa logout
</li><li>2012-06-20 10:53:45 | Login: aa logged in.
</li><li>2012-06-20 11:10:04 | Login: aa logout
</li><li>2012-06-20 11:10:18 | Login: aa logged in.
</li><li>2012-06-20 11:13:16 | Login: aa logged in.
</li><li>2012-06-20 11:48:51 | Login: aa logout
</li><li>2012-06-20 11:49:16 | Login: aa logged in.
</li><li>2012-06-20 11:49:48 | Login: aa logout
</li><li>2012-06-20 11:52:31 | Login: aa logged in.
</li><li>2012-06-20 11:56:13 | Login: aa logout
</li><li>2012-06-20 11:56:26 | Login: aa logged in.
</li><li>2012-06-20 11:56:36 | Login: aa logout
</li><li>2012-06-20 11:57:07 | Login: aa logged in.
</li></ul>
    </div>
    <div id="footer">Copyright 2012, centerwow</div>
  </body>

CSS コード:

​html { height: 800px; width: 100%;overflow: hidden; }
body { height: 100%; width: 100%; margin: 0; padding: 0; border: 0; background: #FFFFFF;
  font: 13px/15px Verdana,Arial,Helvetica,sans-serif; }
img { border: none; }

#header { height: 95px; text-align: center; background: red; color: #D4E6F4; }
#header h1 {float:left; padding: 1px;height: 69px; margin: 1px;;width: 100%;clear: both;background: green;}

/* Note: IE 5 & 6 won't understand min-height */

#main { max-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/

    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
    width: 300Px;
    background:#FFF2D2;
    margin:1px;
    overflow:auto;}

#footer { width:100%; height: 2em; padding: 1em; text-align: center; 
  background: red;  color: #D4E6F4;position: absolute;bottom:0; }


​
4

3 に答える 3

2

常に少し「ごまかす」ことができ、3 つのメイン div で絶対位置を使用できます: http://jsfiddle.net/c6ABa/71/

#header { position: absolute; top: 0; height: 95px; }
#main { position: absolute: top: 95px; bottom: 40px; }
#footer { position: absolute; bottom: 0; height: 40px; }
于 2012-06-20T10:25:55.360 に答える
1

さて、私はあなたのために動作するバージョンを持っています、私はこれを達成するためにJqueryを使用しました、以下はコードとフィドルリンクです。

 $(document).ready(function(){
    var windowHeight = $(window).height();
    var mainBlockHeight = windowHeight - $('#footer').height() - $('#header').height() - 28;
    $('#main').height(mainBlockHeight);

});

これがフィドルです、http：//jsfiddle.net/meetsubhajit/c6ABa/73/

編集：ここでは、ヘッダーとフッターの高さが増減した場合に後でスクリプトを再度編集する必要がないように、フッターとヘッダーの高さを動的にフェッチしました。

于 2012-06-20T10:28:12.253 に答える
1

これを試して：

JS:

$(document).ready(function() {
    $('#main').height($(window).height() - 150);

    $(window).resize(function(){
        $('#main').height($(window).height() - 150);
    });
});

#mainウィンドウのサイズ変更中に自動でサイズ変更されます。

編集:そして、ここにあなたの更新されたフィドルがあります: http://jsfiddle.net/c6ABa/53/

于 2012-06-20T10:15:47.530 に答える