Question

您能否为以下内容提供HTML代码？

我需要在整个页面上水平显示div和iframe。但我需要div固定大小（100px）和iframe适合剩余空间。

div+iframe

由于

Answer 1

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>

修改

要避免水平滚动条在%中为两个元素定义宽度 - Updated Fiddle

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

编辑：修正了右侧的额外间距，导致滚动条出现。

Answer 3

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

您可以根据需要调整宽度。

Answer 4

试试这个，

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

水平显示div和iframe

4 个答案: