1

以下のコードを使用して、次の設計に到達しようとしています
。 1. テーブルの幅/高さは、ブラウザー ウィンドウの 80%/70% である必要があります。左のセルの幅は 40% でな​​ければなりません。
2. 右側のセルの iframe は、使用可能なすべてのスペースを埋める必要があり、セルの内側の境界線を超えないようにする必要があります。 

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

質問:
1. iframe の下部にある薄い青色の「パディング」スペースはどこから来たのですか? 表示されないようにする方法は？
2. 以下を使用せずにこのデザインに到達することは可能ですか。a) JavaScript を使用する。b) CSSbox-sizingプロパティを使用していますか?

4

2 に答える 2

8

iframe「インライン フレーム」の略で、インライン要素は周囲のテキストのベースライン上にあります。ベースラインはディセンダー (「g」の末尾など) を許可し、空白はディセンダーが占めるスペースです (何もない場合でも)。

を設定display: block;するとiframe、パディングが修正されます。

編集：これan updated version of @syedmohsin's jsFiddleは、それを取り除きbox-sizing、80% width/70% height問題を解決します。

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;
    }
}
于 2013-05-31T03:50:42.410 に答える