デモページ
以前は、JavaScript で実装してたのですが、知らない間に calc 関数というものがあったのを知り、IE11 ですらうまく動作する結果になっていました。 以下は php を使って、高さの部分を PHP の側の変数を使用して埋め込んでいます。IE11 以外のブラウザならば、var 関数を使用できるのですが、IE11 が実装する見通しも無いのでこのような形にするか、固定値を2度設定する必要があります。
<?php
require_once('view_config.php');
# **************************************
# js キャッシュ用
# **************************************
$tm = mktime();
# **************************************
# 画面定義
# ( Ruby や Python に合わせた画面形式 )
# **************************************
$out_client = <<<HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" />
<script src="{$view_js}?{$tm}"></script>
<style>
/* ブロックを左右に表示 */
.ttl {
display: inline-block;
width: 150px;
}
.entry {
display: inline-block;
}
.line {
margin-bottom: 0;
}
/* IFRAMEコントロール用 */
html,body {
height: 100%;
}
body {
margin: 0;
}
#head {
padding: 16px;
width: 100%;
height: {$view_head_height}px;
background-color: #e0e0e0;
}
#extend {
display: block;
margin-left: auto;
margin-right: auto;
width: calc( 100% - 3px );
height: calc( 100% - {$view_head_height}px - 2px );
border: solid 2px #c0c0c0;
}
</style>
</head>
<body>
<div id="head">
<p class="ttl">
氏名で検索
</p>
<p class="entry">
<input
id="cond"
type="text">
<input
class="ml-4 btn btn-success"
id="btn"
type="button"
value="問合せ">
<a
class="ml-4 btn btn-info btn-sm"
href="{$_SERVER["PHP_SELF"]}">GET 再読み込み</a>
</p>
<p class="line"></p>
<h4 class="text-danger">{$check_message}</h4>
</div>
<iframe id="extend" name="extend" class="iframe-option" src="req/control.php"></iframe>
</body>
</html>
HTML;
print $out_client;
?>
まず、高さを正しく計算させる為に html と body 要素の高さを 100% として明示します。次に基本部分の body 要素の margin を 0 として余白は #head 側で作成します。
そして、calc 関数で IFRAME の高さブラウザに計算させます。(他の小さな数値は縦と横の小さな余白用に使用しています)
view_config.php
<?php $view_js = "entry.js"; $view_head_height = "100"; ?>
|
|
【IFRAME パッケージの最新記事】
- jQuery プラグイン : Columns と PHP の連携と、ドキュメントには書かれていないカスタマイズ方法
- １会話・IFRAME(TCPDF)テンプレート : jQuery + Bootstrap(css) + mmenu + Firebase + TCPDF + PHP
- jquery.ajax-combobox(オートコンプリートとドロップダウンリストを組み合わせたコンボボックス) を使用して、入力可能なコンボックス( しかもリストはページャ付き )
- jquery.ajax-combobox で JSON をデータに使う場合、複数項目を検索対象にする為の簡単な改造
- FileSaver.js と canvas-toBlob.js を使って、canvas で表示されているイメージを保存する
- クリックしたコンテンツ以外を暗転する jQuery TOOLS の expose プラグイン
- tabIndent.js : テキストエリアでタブが使用できます。オリジナルを少し改造して、jQuery の名前空間に登録しました。
- 何もかも回転する、jQuery の簡単なプラグイン実装
- jQuery UI の タブ と アコーディオンで、スキンのチェック
- tableMagic で作成されたテーブルを fixedheadertable でヘッダと左端列を固定 / jQuery プラグイン
- jQuery : Columns で作成されたテーブルを fixedTblHdrLftCol でヘッダと左列を固定( CSS カスタマイズ )
- IOS のようなスクロールバーインターフェイスを jQuery のプラグインとして実現する jQuery.NiceScroll
- jQuery : 一つの 複数選択の SELECT 要素から二つのリストボックスを作成して、必要なグループ選択するプラグイン / multiselect.js と PHP との連携
- jQuery プラグイン mmenu( 左右からスライドインするメニュー ) を F1 キーと F2 キーに割り当てて、左右から二つのメニューを開く
- jQuery で、ページ内で F1 キー(HELP) を起動させないようにする / IFRAME 内も同時対応
- FRAME の代替として使う IFRAME パッケージ
