With the code below, I'm trying to reach the following design:
1. Table width/height must be 80%/70% of a browser window. Its left cell must be 40%-wide.
2. Iframe in a right cell must fill all available space and never go beyond a cell's inner border.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<style>
body {width:100%}
iframe {width:100%; overflow:auto; margin:0px; border:solid 2px red; background-color:white; -moz-box-sizing:border-box; box-sizing:border-box}
table {width:80%}
table, td {margin:0px; padding:0px; border:solid 1px black}
</style>
<script src="jquery.js"></script>
</head>
<body>
<table>
<tbody>
<tr>
<td style="width:40%">Cell 1</td>
<td style="background-color:blue">
<iframe src='iframe.htm'></iframe>
</td>
</tr>
</tbody>
</table>
<script>
$(window).load(function() {
$('iframe').height($(window).height()*0.7);
});
</script>
</body>
</html>
Questions:
1. Where that thin blue "padding" space at the bottom of an iframe es from? How to force it to never appear?
2. Is it possible to reach this design without: a) using javascript; b) using CSS box-sizing property?
With the code below, I'm trying to reach the following design:
1. Table width/height must be 80%/70% of a browser window. Its left cell must be 40%-wide.
2. Iframe in a right cell must fill all available space and never go beyond a cell's inner border.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<style>
body {width:100%}
iframe {width:100%; overflow:auto; margin:0px; border:solid 2px red; background-color:white; -moz-box-sizing:border-box; box-sizing:border-box}
table {width:80%}
table, td {margin:0px; padding:0px; border:solid 1px black}
</style>
<script src="jquery.js"></script>
</head>
<body>
<table>
<tbody>
<tr>
<td style="width:40%">Cell 1</td>
<td style="background-color:blue">
<iframe src='iframe.htm'></iframe>
</td>
</tr>
</tbody>
</table>
<script>
$(window).load(function() {
$('iframe').height($(window).height()*0.7);
});
</script>
</body>
</html>
Questions:
1. Where that thin blue "padding" space at the bottom of an iframe es from? How to force it to never appear?
2. Is it possible to reach this design without: a) using javascript; b) using CSS box-sizing property?
2 Answers
Reset to default 8iframe is short for "inline frame", inline elements sit on the baseline of the surrounding text. The baseline allows for descenders (the tail of the 'g' etc.) and the white space is the space taken up by the descenders (even if there are none).
Setting display: block; on the iframe should fix the padding.
Edit: here's an updated version of @syedmohsin's jsFiddle, it gets rid of box-sizing and it fixes your 80% width/70% heightissue for you.
CSS
html, body {
width:100%;
height: 100%;
}
iframe {
display:block;
overflow:auto;
border:solid 2px red;
width: 100%;
height: 100%;
margin:0;
}
table {
width:80%;
height: 70%;
}
table, td {
margin:0px;
padding: 0px;
border:solid 1px black;
}
td {
height: 100%;
padding: 0 3px 2px 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
td {
padding: 0 3px 0px 0;
}
}
@media screen\0 {
td {
padding: 0 3px 0px 0;
}
}
The iframe is being treated as an inline element, so the table-cell aligns it to the baseline (and leaves a bit of space for descenders). You can see a similar effect with inline images.
Set display: block on the iframe ... or line-height: 0 on the td