如何使用CSS调整jQuery的加载方法加载的内容

时间:2013-07-08 20:06:23

标签: javascript jquery

我正在使用加载方法在我的网站上加载网页。

// main.js
$(document).ready(function ()
{
    $("#content").html("<object data='http://tired.com/'>");
});

// index.html
<html>

<head>

    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="scripts/main.js"></script>

    <style type="text/css">

#container{
    width: 100%;
    height: 100%;
}

#content{
    margin-top: 10;
    margin-left: 100;
    margin-bottom: 10;
    margin-right: 10;

    width: 500px;
    height: 500px;
}

    </style>

</head>

<title>
Testing loading a html page into a div
</title>

<body>

    <div id="container">

        <div id="top">
            <p> Top </p>
        </div>

        <div id="content">
        </div>

        <div id="bottom">
            <p> Bottom </p>
        </div>

    </div>

</body>

</html>

尽管content div的高度和宽度为500px,但网页仍会以原始大小加载。

如何让它变大?

感谢。

2 个答案:

答案 0 :(得分:0)

它确实有用,请检查这个小提琴。 JSFiddle Demo Link

您还可以将px添加到边距。

#content{
    margin-top: 10px;
    margin-left: 100px;
    margin-bottom: 10px;
    margin-right: 10px;
    background:skyblue;
    width: 500px;
    height: 500px;
    padding:10px;
}

答案 1 :(得分:-1)

我建议尝试在对象标签上设置样式:

#content object {
    width: 500px;
    height: 500px;
}