How to fit iframe and div in 100% height combined?

Question

I'm having difficult times to find a way to fit an iframe and div both with 100% full height on the page. Ideally I need to have a footer menu with 280px height and the iframe div needs to cover the rest of the page.

As far as I researched, it will be possible only with jQuery. I tried CSS Flex without success.

<!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:

 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>

How to fit iframe and div in 100% height combined?

Question

1 answers

solution1
1 ACCPTED 2016-09-13 14:02:23

How to fit iframe and div in 100% height combined?

Question

1 answers

solution1 1 ACCPTED 2016-09-13 14:02:23

solution1
1 ACCPTED 2016-09-13 14:02:23