重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

firefoxで「height: 100%;」と指定しているのに100%にならない

解決済

  • 質問者：green64
  • 質問日時：
  • 回答数：4件

<html>
<body>
<table border=1>
<tr>
<td>
<table border=1>
<tr>
<td rowspan=2 style="height: 10px;">
<a href="#" style="display: block; height: 100%;">
う
</a>
</td>
<td>
え
</td>
</tr>
<tr>
<td>
え
</td>
</tr>
</td>
</tr>
<tr>
<td>
い
</td>
</tr>
</table>
</body>
</html>

上記のソースで「う」のリンクをセル全てに指定したいです。
IEやchromeではセル全てがリンクになりますがfirefoxは外側の「height: 10px;」の高さしか
リンクになりません。
どうすればfirefoxでもセル全てがリンクになるのでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.3ベストアンサー

こんにちは。


height: 100%ってそもそも融通聞かないんですよね。親要素の高さ指定が必ず必要な上、それが基準となり影響してきます。

ソースを見るとaの親要素のtdに10pxと指定しているので、これが基準でaも10pxにしかならないのだと思います。
考えてみれば、囲っている親要素より大きくないのが普通です。
今回はrowspanが絡んできていておかしなことになっているので、本来はFireFoxが正しいのだと思います。

この場合、
①親要素のtdに実際必要な高さ分のpx数を記述するか、
②aのheight:100%を諦め実際に必要な高さ分のpx数を記述するか、
③もし何かしらの理由で（変動するとか）HTMLやCSSに実数を記述できないのであれば、jQueryで親要素のtdの実際(ブラウザ上で表示されている)の高さを取得してaに適用するか

この3つしかないと思います。ただしメルマガとかのソースだと③は無理かも。

ちなみにjQueryの場合は以下の感じ。
ただしクラスを設定していないので、他にこのaとtdのような関係性のところ全てに適用されるので必要に応じてクラス指定が要ります。
【jQuery】
<script>
$(function () {
hsize = $("a").parent().height();
$("a").css("height", hsize + "px");
});
</script>
【説明】
aの親要素の高さを取得
aのcssに取得した高さを実行

tableって表以外は本来使わないほうが良いのですが、例えばECサイト運営とかメルマガのお仕事だと、結構無理やり使ってるところが多いですよね…

頑張ってください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答していただいた内容のファンクションで出来ました。
動的な場合だとやはり計算等が必要なのですね。
あまりcssに詳しくないものでtableを使用してしまったため今回の問題が発生しました。
次回からは注意しなければなりませんね。

通報する
お礼日時：2015/10/20 20:49

No.4

  • 回答者： ORUKA1951
  • 回答日時：

CSSの仕様ではBOXの寸法は、下記の様にpadding辺の内側です。


tableは、「、単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」「ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」と1999年のHTML4.01の勧告以来、デザイン目的で使用する事は強く否定されています。
　リストでマークアップされている方がデザインの融通性も高く、HTMLもシンプルで、制約も少ない。特に検索エンジン最適化(SEO)上も有利です。
【参考】
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　ソースを見ると分かるように単純な二階層のリストです（からメンテナンスは簡単）が、スタイルシートでデザインされています。ブラウザ(firefox)の表示メニューから[スタイルシート]を選択して、色々なスタイルを選択して見たり、印刷プレビューを確認して御覧なさい。tableよりはるかに優れているのが分かるかと。

下記にウェブ標準のサンプルを上げておきます。
・Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　のDATAで検索済みのHTML4.01strict+CSS2.1です。
　文字コードはShift_JIS
・タブは＿に置換してあるので戻す事。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951&#64;hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}

table[summary="50音"]{
＿width:50%;
＿margin:10px auto;
＿border:none;
}
table[summary="50音"] td,table[summary="50音"] th{
＿border:none;
＿padding:0;
}
table[summary="50音"] th{
＿background-color:orange;
}
table[summary="あ"]{
＿width:100%;
＿border:none;
}
table[summary="あ"] td{
＿height:30px;
＿position:relative;
＿padding:0;
＿position:relative;
＿border:outset 3px orange;
}
table[summary="50音"] td a{
＿display:block;
＿height:100%;
＿width:100%;
＿background-color:aqua;
}

div.nav{
＿margin:0 auto;
＿background-color:yellow;
＿width:50%;
}
div.nav ul,div.nav ul li{
＿list-style:none;
＿margin:0;
＿padding:0;
＿text-align:center;
＿font-size:0;
}
div.nav ul{
＿width:100%;
＿display:block;
＿background-color:orange;
}
div.nav ul li{
＿font-size:12px;
＿line-height:2em;
＿width:100%;
}
div.nav ul li ul li{
＿display:inline-block;
＿width:20%;
}
div.nav ul li ul li a{
＿display:block;
＿background-color:aqua;
＿border:outset 3px orange;
＿text-decoration:none;
}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<table summary="50音" border="1">
＿＿＿<tbody>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="あ行">あ行
＿＿＿＿＿＿<table summary="あ" border="1">
＿＿＿＿＿＿＿<tbody>
＿＿＿＿＿＿＿＿<tr>
＿＿＿＿＿＿＿＿＿<td><a href="./A">あ</a></td>
＿＿＿＿＿＿＿＿＿<td><a href="./B">い</a></td>
＿＿＿＿＿＿＿＿＿<td><a href="./C">う</a></td>
＿＿＿＿＿＿＿＿＿<td><a href="./D">え</a></td>
＿＿＿＿＿＿＿＿＿<td><a href="./E">お</a></td>
＿＿＿＿＿＿＿＿</tr>
＿＿＿＿＿＿＿</tbody>
＿＿＿＿＿＿</table>
＿＿＿＿＿</th>
＿＿＿＿</tr>
＿＿＿</tbody>
＿＿</table>
＿＿<div class="nav">
＿＿＿<ul>
＿＿＿＿<li>あ行
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="./A">あ</a></li>
＿＿＿＿＿＿<li><a href="./B">い</a></li>
＿＿＿＿＿＿<li><a href="./C">う</a></li>
＿＿＿＿＿＿<li><a href="./D">え</a></li>
＿＿＿＿＿＿<li><a href="./E">お</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿</ul>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

申し訳ありません、回答内容をあまり理解できていないかもしれません。
回答内容が質問内容と合っていないと思うのですが。
結合したセル全てをリンクにしたいのですが、回答だと結合されていません。
試しにテーブルを結合してみましたが、質問と同じで一つのセルの高さにしかリンクになりません。
そもそもtableを使うこと自体が間違いだというのでしょうか。

通報する
お礼日時：2015/10/20 20:58

No.2

  • 回答者： ORUKA1951
  • 回答日時：

>tableでリンクを作らなければならないのでli等は使えません。


　それは、具体的にどんなリンク集なのか分からないと

>tableの中にtableを入れた場合にしか質問の問題は発生せず
　ありえません。

　より具体的な内容が分からないと答える事ができません。

どんなリンクの一覧なのか。
スタイルシートをどう書かれているのか
    • good
    • 0
    • 件
通報する
この回答へのお礼

tableにtableを入れなくても同じ問題が発生しました。
申し訳ありません。

どんなリンクなのかは質問の通りです。
リンクやスタイルシートは質問のままです。
セルの高さを指定して、rowspanで結合して、そのセル全てをリンクにしたいだけです。

通報する
お礼日時：2015/10/18 19:39

No.1

  • 回答者： ORUKA1951
  • 回答日時：

firefoxの挙動が正しいのですけど・・・


a要素はインライン要素ですからね。そもそも、セル内に収まるのもおかしい(^^)
height,widthはそれの先祖のstatic以外の抱合ブロックのサイズですよ。
Box model - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

　そもそもそんなリンクにtableは使いませんし。
<nav>
　<ol>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　</ol>
</nav>
じゃまずいのですか・
    • good
    • 0
    • 件
通報する
この回答へのお礼

質問では簡略化していますが実際は色々と書いています。
tableでリンクを作らなければならないのでli等は使えません。
tableの中にtableを入れた場合にしか質問の問題は発生せず
table1つだとfirefoxでもセル全てがリンクになります。
table2つ以上でも同じだと思っているのですが。

通報する
お礼日時：2015/10/17 20:49

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報