如何将Div位置固定在另一个上方div之下?

时间:2013-01-22 05:05:02

标签: css html iframe vertical-alignment

我有一个div并且在该div的下方显示一个div与iframe在同一页面中加载html页面dynamicaly ..但是发生的是带有iframe的div覆盖上部分作为iframe包含html haev long height ..所以任何人都可以告诉我如何将包含iframe的div放在div标签上方,无论iframe中加载了哪些内容。我还想让它在chrome和mozila中看起来相同。

以下是我的结构...

<div class="row-fluid">
    <div class="span3" id="media_select">
            <label
                style="float: left; padding-top: 5px; padding-bottom: 10px; padding-right: 10px; padding-left: 22px">  Media  
            </label><select style="width:125px" name="mediatype" id="mediatype"
                data-placeholder="- Select Ad Type -" class="chzn-select"
                tabindex="4">
                <option value="0">Select All</option>
                <%
                    List<mediatype> media_typelist = mediatypeLocalServiceUtil
                            .getAllMediaType();
                    for (mediatype media_typelistitem : media_typelist) {
                %>
                <option value=<%=media_typelistitem.getPrimaryKey()%>><%=media_typelistitem.getMedianame()%></option>
                <%
                    }
                %>
            </select>

        </div>
        <div class="span3">


        </div>

//这是我想在上级

之下修复的div
<div class="bordercolor" id="mydiv" style="display: none; text-align: center">

    <IFRAME SRC="" id="reportpreview"  style="text-align: center;"
        marginheight="0" frameborder="0" onLoad="sizeFrame();"></iframe>

</div>

iframe在以下脚本中分配dynmaiclly的高度: -

function sizeFrame() {
    var F = document.getElementById('reportpreview');
    if(F.contentDocument) {
    F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
    } else {



    F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome

    }

    }

/// css报告预览ID // iframe

   #reportpreview {
        float:center;
        margin-top:10%;
        margin-bottom:10%;
        zoom: 1.2;
        -moz-transform: scale(1.2);
        -moz-transform-origin: 2 0;
        -webkit-transform: scale(1.2);
        -webkit-transform-origin: 2 0;
        width: 720px;
        min-height: 37px;



    }

1 个答案:

答案 0 :(得分:1)

   #reportpreview {
    clear:left;
    float:center;
    margin-top:10%;
    margin-bottom:10%;
    zoom: 1.2;
    -moz-transform: scale(1.2);
    -moz-transform-origin: 2 0;
    -webkit-transform: scale(1.2);
    -webkit-transform-origin: 2 0;
    width: 720px;
    min-height: 37px;
    }   

clear:left添加到iframe div