html - How to make iframe use all height available to it -


i have code:

<!doctype html> <html lang="en"> <head>   <title>example</title>   <style>     html, body, iframe {       height: 100%;       width: 100%;       border: none;       margin: 0 0 0 0;       padding: 0 0 0 0;     }      header {       height: 34px;       background-color: red;     }      footer {       height: 17px;       background-color: green;     }   </style> </head> <body>   <header></header>   <iframe src="https://freebsd.org"></iframe>   <footer></footer> </body> </html> 

how can make header , footer stay fixed, visible when resizing , iframe take remaining space? a.i. want layout stay fixed, scrollbar showing iframe.

i think tried everything, googling stomach, nothing has worked achieve goal. either iframe not visible, overflows on footer or header or else goes wrong.

so far tried css solutions, because refuse believe not possible css alone, if there no other way, js solution ok too.

i doing nw.js application, footer , header window controls, need them visible time.

i think give you're looking (fiddle: http://jsfiddle.net/a5oux4s8/):

html, body {     height: 100%; }  html, body, header, iframe, footer {     margin: 0;     padding: 0;     width: 100%; }  header {     height: 34px;     position: fixed;     top: 0;     left: 0;     background-color: red; }  iframe {     border: none;     height: calc(100% - 51px);     margin-top: 34px; }  footer {     height: 17px;     position: fixed;     bottom: 0;     left: 0;     background-color: green; } 

it work if don't need support older browsers because of calc() function (see http://caniuse.com/#feat=calc). if need support older browsers, there ways around it. let me know.


Comments

Popular posts from this blog

c++ - Delete matches in OpenCV (Keypoints and descriptors) -

java - Could not locate OpenAL library -

sorting - opencl Bitonic sort with 64 bits keys -