2011-07-29 5 views
1

<embed />タグを<div>のようにするためにCSSを追加したいと思います。現在のところ、iframeに似たスクロールボックスにつながる、任意の高さと幅を追加します。埋め込みをdivのように動作させる

divのように動作させるために「埋め込みリセット」を知っている人はいますか?

編集:本当に高さを内部コンテンツに基づいて取得する方法を理解する必要があります。ここで私がこれまで持っているものです。

embed { 
    width: 100%; 
    display:block; 
    margin: 0; 
    /* Below from Eric Meyer's Reset */ 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 

おかげで、 マット

+0

あなたが本当にしたいことについてもう少し言えますか?あなたのためのオプションではないdivに埋め込みをラッピングしていますか? –

+0

他の場所からコンテンツをロードして、divと同じ方法でコンテンツを流したいと思っています。 divには埋め込みはできませんが、ソリューションは現代のブラウザでのみ動作します(デベロッパー向け) – Matt

+0

は 'div'でラップし、' embed' 'height =" 100% "'と ' width = "100%"。次に、CSSを使用して 'div'のサイズを決めますか?それとも、これはあなたが意味するものではありませんか? – Bazzz

答えて

0

ちょうど野生の推測。します

<embed style="display:block; width: 100%; height: 100%"> 

あなたのために働くのですか? (embed要素の高さと幅の属性はピクセル単位ではなく、割合も、したがって、ここではあまり有用ではありませんしなければならないことHere's the explanation for display:block).

注意。

+1

これは、「非常に」野生の推測です。埋め込みタグは、インラインスタイルが機能することを望んでいるオブジェクトタグ内のものですそれは期待どおりに動作し、すべてのブラウザで、かなりの推測です。 :) – Bazzz

+0

かなりです。高さが正しく機能しません。しかし、あなたの考えをありがとう – Matt

+0

その後、Nevermind :) – nes1983

-1

あなたはタグ自体にwidth=100%;height=100%;を追加することができます。

<embed src="http://google.com" type="text/html" width=100%; height=100%;>

http://jsfiddle.net/jasongennaro/K8nCn/1/

重要:これは、コンテンツに十分なウィンドウスペースがある場合にのみ機能します。

おそらくすでに知っているでしょうが、embedは、ビデオやオーディオなどのインタラクティブコンテンツを対象としています。 [1,2]

Webコンテンツの配信は、iframeやphp + cURLなどの方法で行う方がよいでしょう。

+0

HTML5仕様に違反しています。幅と高さはピクセルではなく、パーセンテージでなければなりません:http://www.whatwg.org/specs/web-apps/current-work/multipage/the-map-element.html#attr-薄暗い幅。 – nes1983

+0

ありがとう@ nes1983。私はそれが仕様に違反しているかどうかはわかりません。 * Must *は暗示されていません。私は* may *を読む。 * "img、iframe、embed、object、video、... input要素の幅と高さの属性はCSSピクセルで指定することができます" * –

+0

Cool!これはかなりいいようです。私は数分で飛行機に乗っているので私は今それをテストすることはできませんが、私は後でそれをチェックします。ありがとう! – Matt

0

<object>タグのスタイルを変更するとどうなりますか?

object, embed { 
    width: 100%; 
    display:block; 
    margin: 0; 
    /* Below from Eric Meyer's Reset */ 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
関連する問題