1

以下のhtmlコードを教えてください。

divページ全体を表示してiframe水平に合わせる必要があります。しかし、div を固定サイズ (100px) にし、iframe を残りのスペースに合わせる必要があります。

div+iframe

ありがとう

4

4 に答える 4

3

フィドル

CSS

div{ border: 1px solid #f00; width: 100px; position: absolute; left: 0; top: 0;}
iframe{ width: 100%; margin: 0 0 0 100px;}

HTML

<div>hi</div>
<iframe src="http://www.google.com/"></iframe>

編集：

%水平スクロールバーを回避するには、両方の要素に幅を定義します -更新されたフィドル

于 2012-07-30T13:21:56.727 に答える
2

http://jsfiddle.net/gZNKk/1/

<html><head>
    <style>
        body, html {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
        #left {
            float: left;
            width: 100px;
            background: blue;
            height: 100%;
        }
        #right {
            width: auto; /* This is the default */
            float: none;
            margin-left: 100px;
            background: red;
            height: 100%;
        }
        #right-iframe {
            background: yellow;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="left"></div>
<div id="right">
    <iframe id="right-iframe"></iframe>
</div>
</body></html>​

編集:スクロールバーが表示される原因となる右側の余分なスペースを修正しました。

于 2012-07-30T13:24:07.443 に答える
1

CSS:

#content-wrapper {
width: 100%;
overflow:hidden;
}

#content-left {
width: 49.5%;
min-height: 100%;
float: left;
border-right: solid 1px #A9D0D6;
}

#content-right {
width: 49.5%;
min-height: 100%;
float: right;
}

HTML:

<div id='content-wrapper'>
    <div id='content-left'></div>
    <div id='content-right'><iframe src="http://www.google.com"></div>
</div>

必要に応じて幅を調整できます。

于 2012-07-30T13:22:26.570 に答える
1

これを試して、

http://jsfiddle.net/anglimass/UUmsP/15/

于 2012-07-30T13:28:48.713 に答える