如何将iframe和div的高度合并为100％？

Question

I'm having difficult times to find a way to fit an iframe and div both with 100% full height on the page. 我很难找到一种适合iframe和div且页面高度均为100％的方法。 Ideally I need to have a footer menu with 280px height and the iframe div needs to cover the rest of the page. 理想情况下，我需要一个高度为280px的页脚菜单，而iframe div需要覆盖页面的其余部分。

As far as I researched, it will be possible only with jQuery. 据我研究，只有jQuery才有可能。 I tried CSS Flex without success. 我尝试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>

Any idea? 任何想法？

Thanks 谢谢

Answer 1

Working example with CSS Flexbox: 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