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 回答