CSSの相対サイズと絶対サイズの混合

私はもともと考えていた問題について、解決するのがかなり簡単だと思っています。しかし、明らかにそうではありません - 少なくともCSSだけではありません。CSSの相対サイズと絶対サイズの混合

これは基本的な状況です：私は画面の高さの90％と2つの内側のdivをいっぱいにラッパーdiv要素を持っている

<div id="wrapper" style="height:90%;width:410px;background:#aaaaaa;"> 
    <div id="top" style="margin:5px;width:400px;background:#ffffff;"> 
    </div> 
    <div id="content" style="margin:5px;width:400px;background:#ffffff;"> 
    </div> 
</div>

。最初のdivの "top"にはいくつかの要素があります。 2番目のdiv "content"は、ラッパーdivの残りのスペースを埋める必要があります。

これまでのところ、残りのスペースを埋めるためにdivコンテンツを設定する方法が見つかりませんでした。たとえ相対的な高さしか知りませんでしたのでdivの「top」の正確な高さを知っていました。ラッパーdiv。

したがって、残りのスペースを埋めるためのdivコンテンツまたは相対サイズと絶対サイズ（つまり高さ：100％〜100px）を混合する方法を知っていればうれしいです。

出典

2012-02-11 shiin

あなたのHTMLコードは本当に間違っている：

カンマの後には、インラインCSSを使用するスタイルシート内のすべてのCSSを入れて、あなたのHTMLページにスタイルシートをロードしない
を属性を使用しないでください
CSSの構文は次のとおりです。propertie: value;例：width: 10px;ない：width=10px

100％〜100％を使用するにはCSS3 calcを使用できますが、この機能はless browser supportです。 JSを使用して、ある種のcalc関数を作ることができます。

出典

2012-02-11 11:33:01

入力していただきありがとうございます - 私は構文のスペルミスを訂正しました（実際のコードは明らかにそれらを持っていませんでした、それは独自のCSSファイルがありますが、私はそれがhtmlタグ） – shiin

なぜこの答えに-1？私は「ひどく汚い、無駄に費やされた投稿」を書いたのですか？あるいは、「はっきりとおそらく危険な不正確な」回答ですか？ –

現在、div要素とCSSを使用して、達成しようとしているものをクロスブラウザで解決する方法はありません。しかし、代わりにtableを使用する試みられた真の方法で、あなたが望む振る舞いを得ることができます。

<html> 
<head> 
<style type="text/css"> 
#wrapper { 
height:90%;width:410px;background:#aaaaaa;border-spacing:5px; 
} 
#wrapper td { 
padding:0;vertical-align:top; 
} 
#top { 
background:#ffffff; 
} 
#content { 
height:100%;background:#ffffff; 
} 
</style> 
</head> 

<body> 
<table id="wrapper" role="presentation"> 
    <tr> 
    <td id="top">Top</td> 
    </tr> 
    <tr> 
    <td id="content">Content</td> 
    </tr> 
</table> 
</body> 
</html>

EDIT：

私が私の答えにスズメバチの巣を攪拌表示されます。レイアウトのためのテーブルの使用が悪いと言う人々には、ほとんど宗教的なフォローがあるようです。多くの場合、それは絶対に真ですが、there are situations where a table will do what CSS cannotです。これは、CSSの代替案が誕生している状況の1つですが、ほとんどのブラウザはまだそれをサポートしていません。サイト設計者は、クロスブラウザ機能を使用してレイアウトを作成するかどうかを決めることができます。また、将来的に維持しやすくなる制限付きの純粋なCSSレイアウトを使用することもできます。

出典

2012-02-11 11:42:20 Feysal

決して、レイアウト用にテーブルを使用していません。 – Rob

次に、テーブルを使用しないこの問題に対するクロスブラウザソリューションを提供します。 – Feysal

@Feysal - 基本的なクロスブラウザエフェクトにテーブルを使用する必要がある場合は、少なくともその問題を軽減できます。 cellspacingとcellpaddingは、HTMLの次のバージョンでは廃止されていますが、確かにCSSで置き換えることができ、 'role =" presentation "をテーブル要素に追加することで、現代のスクリーンリーダーのテーブルとして呼び出され、レイアウトのためにテーブルを使用することの有害な影響。 – Alohci

ありCSSですべての利用可能なスペースを埋めるために、コンテンツのdivを取得するには何のクロスブラウザの方法はありませんが、それがなかったかのように物事が見えるように非常に簡単です：

<html> 
<head> 
<style type="text/css"> 
#wrapper { 
width:400px;height:90%;border-style:none solid;border-color:#aaaaaa;border-width:5px;background:#ffffff; 
} 
#top { 
border-bottom: 5px solid #aaaaaa; 
} 
#content { 
} 
</style> 
</head> 

<body> 
<div id="wrapper"> 
    <div id="top"> 
    Top 
    </div> 
    <div id="content"> 
    Content 
    </div> 
</div> 
</body> 
</html>

これは十分なはずですほとんどの場合、コンテンツにonmouseoverハンドラのようなものを使用しない限り

出典

2012-02-11 14:02:34 Feysal

解決に感謝します。しかし、あなたが自分で述べた限りでは、あなたがすることができないことはまったくありません。また、これらのdivの下にあるものを表示するために、境界線を透明にすることはできません（透明な境界線はdivのみを表示します）。 – shiin

ボーダーは透明ではありません。質問のラッパーの背景と同じグレーの色調に設定されているため、目的の視覚効果が得られます。 – Feysal

はい。私が意味していたのは、私が私の例で透明なラッパーを使用するように切り替えると、あなたのソリューションはもはや機能しなくなりました。 – shiin

CSSの相対サイズと絶対サイズの混合

答えて

関連する問題