3

CSS式に基づいてdivの高さを設定したい。

基本的に、ビューポート幅の%(たとえば90%)として設定する必要があり ます。次のことを試しましたが、機能していません。

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

私はこれを行うクロスブラウザの方法を検討しています(IE7 +、FF4 +、Safari)

4

2 に答える 2

14

CSS式はIE以外ではサポートされていません(そしてそこでも悪い考えと見なされます)。

ただし、少なくともCSSだけを使用するのではなく、要求していることを実行する別の方法はありません。

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

実際、IEのCSS式はそれ自体がJavascriptであり、非常に強力な式を使用できますが、レイアウトとスクリプトの抽象化を取り除くというマイナスの効果もあります。これが彼らが眉をひそめる理由ですが、純粋なレイアウトが何らかの形の表現を必要とするあなたのようなユースケースがあります。

私が言っているように、CSSには今のところ答えはありません。

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

したがって、おそらくこれは、将来的にJavascriptを必要とし続ける可能性があるものです。いずれにせよ、今のところ確かにそうです。

于 2011-10-25T11:06:20.597 に答える
0

CSSとjavascriptを組み合わせていますが、これは機能しません。

設定するだけです( divがページのルートにない限り、ページではなく、height:90%;要素の幅の90%を実行します)。

それ以外の場合は、javascriptブロックを(できればonloadスクリプトの一部として)作成する必要があります。例:(テストされていません)

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

編集-質問者が幅ではなく高さを設定するように求めていたことを指摘してくれた@Chrisに感謝します。

javascriptがこれを行う唯一の方法だと思います...

<body onload="document.divName.style.height=(document.documentElement.clientWidth ? document.documentElement.clientWidth : window.innerWidth)*0.9">
于 2011-10-25T11:06:45.833 に答える