iframeとdivを100％の高さで組み合わせるにはどうすればよいですか？

私は、iframeに合うようにページを100％完全高さに合わせる方法を見つけるのが難しいです。理想的には、高さ280ピクセルのフッターメニューが必要です。iframe divはページの残りの部分をカバーする必要があります。iframeとdivを100％の高さで組み合わせるにはどうすればよいですか？

私が調査した限り、jQueryでのみ可能です。私は成功しなかったCSS Flexを試しました。

<!DOCTYPE html> 
<html lang="pt-br"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 
</head> 
<body> 
    <div class="container-fluid"> 
     <div class="row"> 
      <header class="header-flex"> 

       <div class="map"> 
        <h2>One</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p> 
       </div> 

       <div class="footer"> 
        <h2>Two</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p> 
       </div> 

      </header> 
     </div> 
    </div> 
</body> 
</html>

おかげ

出典

2016-09-13 Fillipe Pascalicchio

はあなたが使用するCSSを表示することができますか？ – itamar

新しい答えで掲示する –

フレックスボックスである必要はありません。このような単純なもののために、通常は 'calc'も同様に仕事をします。 – CBroe

CSSフレキシボックスと

の作業例を：

body, 
 
html { 
 
    min-height: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.header-flex { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 
.map { 
 
    background: red; 
 
    flex: 1; 
 
} 
 
.footer { 
 
    background: blue; 
 
}

<header class="header-flex"> 
 

 
    <div class="map"> 
 
    <h2>One</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p> 
 
    </div> 
 

 
    <div class="footer"> 
 
    <h2>Two</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p> 
 
    </div> 
 

 
</header>

出典

2016-09-13 14:02:23 Christoph

最初のdivにhtmlファイルをロードする必要があると考えると、jQueryまたはiframeの読み込みをお勧めしますか？ –

それは多くのことに依存します。しかし、それがページ全体の一部であれば、Ajax経由でロードするほうがいいでしょう。後で読み込むことなく、元のHTMLファイルで直接提供することもできます。 – Christoph

iframeとdivを100％の高さで組み合わせるにはどうすればよいですか？

答えて

関連する問題