2011-10-25 11 views
3

CSS式に基づいてdivの高さを設定したいと思います。divの高さを設定するCSS式

基本的には、ビューポートの%(例:90%)に設定する必要があります 私は以下を試みましたが動作しません。

height:expression(document.documentElement.clientWidth ? document.documentElement.clientWidth : window.innerWidth); 

私は

+2

...これを行うための唯一の方法であるjavascriptのだと思います。 Javascriptを使用できない理由はありますか?好奇心の外に、なぜ**高さはビューポートの幅に関連する必要がありますか? –

+0

Ok ..なぜ私はJavascriptを使うことができないのかと答えるためにはbcozです。私は応答性の高い/流体設計と呼ばれるものを使用しています。主にCSSを使って同じHTMLを別の画面サイズで表示します....そして、ビューポートの幅に関連するのは、テキストを回転させるために使用するCSS変換のbcozなので、親要素の幅に基づいて高さが計算されます...私が明確にすることができることを願っています...なぜ私は1位でそれを指定しなかったのですか? – testndtv

+0

@testndtv - それは実際にあなたが求めていることをしたい(私も好奇心が強い)ための非常に良い理由です。今私はあなたのために問題を解決する可能性がある他の方法があるかどうかを確認するためにもう少し詳細を掘り下げるかもしれないもう少し情報を得ました。 – Spudley

答えて

12

CSS式はIE以外の場所はサポートされていません(でもそこに悪い考えと考えられている)(IE7 +、FF4 +、Safariなど)これを行うのクロスブラウザな方法で探しています。

しかし、少なくともCSSだけではなく、あなたが求めていることをやり遂げる別の方法はありません。

唯一の選択肢はJavascriptを使用することですが、これはあなたがしなければならないと思います。

実際には、IEのCSS表現自体がJavascriptであり、非常に強力な表現が可能ですが、レイアウトやスクリプトの抽象を取り除くという悪影響もあります。これが理由だと思うのですが、純粋なレイアウトで何らかの表現が必要なユースケースがあります。

私が言っているように、実際にCSSではあなたのための答えはありません。

Googleは現在、変数を含むCSSのいくつかの拡張機能を試しているので、将来的には若干の希望があるかもしれません。それに関する記事:http://johanbrook.com/design/css/webkit-css-variables-mixins-nesting/しかし、これでもあなたが必要としているような表現を可能にするかどうかはわかりません。

将来的にJavascriptを必要とする可能性があります。それは確かにどちらにしても今のところあります。

+0

OK .. IEのために少なくとも、私はどのようにCSS式の作業を行うのですか? – testndtv

+0

CSS式はIE7までしかIEで動作しません。 IE8からは削除されました。 (ドキュメンテーション:http://msdn.microsoft.com/en-us/library/cc304082%28v=vs.85%29.aspx#expressions) – Spudley

0

あなたはCSSとjavascriptを組み合わせていますが、これはうまくいきません。

height:90%;(divはページのルートにない限り、親の要素の幅の90%、ページではありません)を設定するだけです。質問者が求めていたことを指摘してくれてありがとう@クリス -

は、そうしないと、(好ましくはonloadイベントスクリプトの一部として)例えば、...(テストしていません)ジャバスクリプトブロック

<body onload="document.divName.style.width=(document.documentElement.clientWidth ? document.documentElement.clientWidth : window.innerWidth)*0.9"> 

編集を作成する必要があります幅ではなく、高さを設定します。

私はCSS、このためにJavascriptを使用していないお勧めします

<body onload="document.divName.style.height=(document.documentElement.clientWidth ? document.documentElement.clientWidth : window.innerWidth)*0.9"> 
+0

私はこの質問に、ビューポート**幅**、高さではありません。 –

+0

@ChrisStarnes - doh、ハイライト私の明白な愚かさのおかげで - 私の答えを編集 – freefaller

+0

Thxたくさん...私はCSSを使って何かを実装することを見ている(私はCSSを介して幅/高さの属性を動的に変更するので、変更はデスクトップからモバイルへipadに言います)...だから、JavaScriptを避けるためには... – testndtv

関連する問題