如何將iframe和div的高度合並為100％？

Question

我很難找到一種適合iframe和div且頁面高度均為100％的方法。 理想情況下，我需要一個高度為280px的頁腳菜單，而iframe div需要覆蓋頁面的其余部分。

據我研究，只有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>

任何想法？

謝謝

Answer 1

CSS Flexbox的工作示例：

 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>

如何將iframe和div的高度合並為100％？

問題描述

1 個解決方案

解決方案1
1 已采納 2016-09-13 14:02:23

如何將iframe和div的高度合並為100％？

問題描述

1 個解決方案

解決方案1 1 已采納 2016-09-13 14:02:23

解決方案1
1 已采納 2016-09-13 14:02:23