- PR -

フレームを使用しないで、スクロールバーを表示させない方法

1
投稿者投稿内容
ホーガン
常連さん
会議室デビュー日: 2008/02/18
投稿数: 42
投稿日時: 2008-03-11 19:06
フレームを表示して以下の様なコードで作成すると
スクロールバーが表示されないのは確認できたのですが
<frameset rows="180,*" border="0" title="サンプル">
<frame src="kensaku.html" name="kensaku" scrolling="no" />
<frame src="kekka.html" name="kekka" scrolling="no" />
</frameset>

内容としては、kensaku.htmlで検索条件を入力して検索ボタンを押すと
その結果をkekka.htmlで表示し値の入力をして、登録ボタンでデータ
ベースに書き込むという処理です。
検索ボタンを押された後は、kensaku.htmlの項目を全て非入力とした
かったのですが、フレームが分れている場合の処理方法が分らず
フレームを使用しないで、行うようにしました。
kensaku.htmlで検索条件を入力し検索ボタンでkekka.htmlを呼び出す。
kekka.htmlの上部には検索条件を非入力項目として表示する。

そうした場合、どうしてもスクロールバーが出てしまい消す方法が
分りません。

スクロールなし等でサイトを調べてみたのですが、フレームを使用
した記述しか見当たりません。どなたか、ご教示願えませんでしょうか。


じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2008-03-11 20:37
「CSS + overflow」 で検索すると幸せになれると思います。

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌
ホーガン
常連さん
会議室デビュー日: 2008/02/18
投稿数: 42
投稿日時: 2008-03-12 09:20
じゃぬねっとさん。回答ありがとうございます。
CSS + overflowで検索して幸せになろうと試みたのですが
上手くいきませんでした。
サイトのサンプル情報を見て下記のコードで試してみました。
すると結果は変わらず、縦横のスクロールバーがでてきてしまいます。
div.test1 { overflow:visivle }
を追加するだけでいけるとあったのですが。。。
どこがいけないのでしょうか。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Sample</title>
<style type="text/css">
<!--
div {width: 120px; heght: 60px }
div.test1 { overflow:visivle }
-->
</style>
</head>

<body>
<div class="test1">
<table width="1420" border="0" cellpadding="0" cellspacing="0" class="maintable" >
<tr>
<td align="left" valign="top" style="height:10px">&nbsp;</td>
<td colspan="4" align="left" valign="top" style="height:10px">
<table width="986" border="0" cellpadding="2" cellspacing="2">
<tr>
<td height="20" width="6" align="left">&nbsp;</td>
<td height="20" width="90" align="left" valign="middle">　店舗名称</td>
<td height="20" width="170" align="left"><label>テスト店舗</label></td>
<td height="20" width="8" align="left" >&nbsp;</td>
<td height="20" width="90" align="left" >　社員コード</td>
<td height="20" width="170" align="left"><input name="kinyuCd" type="text" id="kinyuCd" size="6" value="123456" disabled="disabled"/></td>
<td height="20" width="3" align="left" >&nbsp;</td>
<td height="20" width="90" align="left" >　記入者</td>
<td height="20" width="154" align="left">テスト太郎</td>
<td height="20" colspan="3" align="left">&nbsp;</td>
<td height="20" width="66" colspan="3" align="left">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2008-03-12 10:37
引用:

ホーガンさんの書き込み (2008-03-12 09:20) より:

CSS + overflowで検索して幸せになろうと試みたのですが上手くいきませんでした。
サイトのサンプル情報を見て下記のコードで試してみました。
すると結果は変わらず、縦横のスクロールバーがでてきてしまいます。
div.test1 { overflow:visivle }
を追加するだけでいけるとあったのですが。。。
どこがいけないのでしょうか。

visivle ではなくて hidden だと思います。
たとえば、

コード:

    body {
        overflow: hidden;
    }

のような感じです。

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌
ホーガン
常連さん
会議室デビュー日: 2008/02/18
投稿数: 42
投稿日時: 2008-03-12 12:29
overflow: hiddenにしてもブラウザ事態の縦スクロールを
消すことができないので、以下の様にフレームを使用して
行うと思う様にスクロールが消えるのでこれでいくことに
しました。
−−−−−−−−−−−−−−−−−−−−−−−−
<frameset rows="*,*" border="0" title="サンプル">
<frame src="kensakukekka.html" name="kekka" scrolling="no" />
</frameset>
−−−−−−−−−−−−−−−−−−−−−−−−
じゃんぬねっとさん色々ありがとうございました。
じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2008-03-12 12:54
引用:

ホーガンさんの書き込み (2008-03-12 12:29) より:

overflow: hiddenにしてもブラウザ事態の縦スクロールを消すことができないので、

<body> 要素だけでなく <html> 要素にも overflow: hidden; の指定が必要です。 IE6 と Firefox でスクロール バーが表示されないことを確認しています。

このあたりのテクニックは擬似フレーム (IE6 対応版) なんかで良く使われます。

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌
ホーガン
常連さん
会議室デビュー日: 2008/02/18
投稿数: 42
投稿日時: 2008-03-12 19:11
じゃんぬねっとさん出来ました(^o^_)

そういう事だったんですね。勉強になりました。
重ね重ねありがとうございます
じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2008-03-13 09:59
引用:

ホーガンさんの書き込み (2008-03-12 19:11) より:

そういう事だったんですね。勉強になりました。
重ね重ねありがとうございます

私の回答が body 要素しか書かなかったので誤解を招いたようです。 サンプルのつもりでしたがわかりにくかったですね。 申し訳ありません。

ところで今回のような場合は window.open (JavaScript) で実装している例が多い気がしないまでもないです。 私はあまり好きではありませんけども。

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌
1

スキルアップ／キャリアアップ（JOB@IT）