Question

我是网页设计的新手。我创建了一个简单的网页DEMO，左侧有一个表单，右侧是学习资源（使用jQuery显示）。这是我的标记：

<!DOCTYPE html>
<html>
    <title>Membership Form</title>
    <style>
        td {
            padding: 8px;
            background-color: #ffffff;
        }

        table {
            font-family: verdana,arial,sans-serif;
            font-size:14px;
            color:#333333;
        }

        h3{
            font-family: verdana,arial,sans-serif;
            text-align:center;
            color: #808080;
        }

        input[type=text], textarea, input[type=radio] {
            -webkit-transition: all 0.30s ease-in-out;
            -moz-transition: all 0.30s ease-in-out;
            -ms-transition: all 0.30s ease-in-out;
            -o-transition: all 0.30s ease-in-out;
            outline: none;
            font-family: verdana,arial,sans-serif;
            padding: 3px 0px 3px 3px;
            border: 1px solid #DDDDDD;
        }

        input[type=text]:focus, textarea:focus, input[type=radio]:focus {
            box-shadow: 0 0 5px rgba(81, 203, 238, 1);
            font-family: verdana,arial,sans-serif;
            padding: 3px 0px 3px 3px;
            border: 1px solid rgba(81, 203, 238, 1);
        }

        input[type=submit], input[type=reset] {
            padding: 14px 26px;
            font-size: 14px;
            line-height: 100%;
            vertical-align: middle;
            text-align: center;
            cursor: pointer;
            transition: background 0.1s ease-in-out;
            -webkit-transition: background 0.1s ease-in-out;
            -moz-transition: background 0.1s ease-in-out;
            -ms-transition: background 0.1s ease-in-out;
            -o-transition: background 0.1s ease-in-out;
            color: #808080;
            font-family: verdana,arial,sans-serif;
        }

        div{
            border : solid;
            border-width : 1px;
            width : 45%;
            height : 75%;
            border-style : dashed;
            border-color : #808080;
            padding : 5px;
        }

        #form{
            float : left;
        }

        #siteloader{
            float : right;
        }

        object {
            width: 100%;
            height : 75%;
        } 


    </style>
    <body>
        <h3> Membership Form</h3>
        <!-- TABLE inside FORM, always -->
        <!-- FORM contacts a CGI (Common Gateway Interface) which echos the submitted data -->
        <div id = "form">
            <form method = "post" action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
            <table>
                    <tr>
                        <td>First Name:</td>
                        <td>
                            <input type="text" size=50 placeholder="First Name" name="fName" required="true">
                        </td>
                    </tr>
                    <tr>
                        <td>Last Name:</td>
                        <td>
                            <input type="text" size=50 placeholder="Last Name" name="lName" required="true">
                        </td>
                    </tr>
                    <tr>
                        <td>Gender:</td>
                        <td>
                            <input type="radio" name="gender" value="male" required="true">Male</input>
                            <input type="radio" name="gender" value="female">Female</input>
                        </td>
                    </tr>
                    <tr>
                        <td>Address:</td>
                        <td>
                            <textarea rows=10 cols=50 name="address" placeholder="Address" required="true"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>Email:</td>
                        <td>
                            <input type="text" size=50 placeholder="Email" name="email" required="true">
                        </td>
                    </tr>
                    <tr>
                        <td>Contact:</td>
                        <td>
                            <input type="text" size=50 placeholder="Residence" name="residence" required="true"> <br>
                            <input type="text" size=50 placeholder="Mobile" name="mobile" required="true">
                        </td>
                    </tr>
            </table>
            <center>
                <input type="submit" value="Submit"></input>
                <input type="reset" value="Reset"></input>
            <center>
            </form>
        </div>
        <div id = "siteloader">
        </div>
    </body>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#siteloader").html('<object data="http://www.w3schools.com/html/html5_form_attributes.asp"/>');
        });
    </script>
</html>

我有几个问题：

即使我在CSS中声明它们都应该是75％，<div>也有不同的高度。 如何才能使它们具有相同的高度？
点击右侧的链接后，浏览器会打开一个新页面，离开我创建的页面。 如何确保在不离开我的网页的情况下进行浏览？

Answer 1

div的样式高度为75％，现在是75％的高度？

添加此声明

html,body{
       height:100%;
}

Answer 2

这两个方块都设置为height: 75%，这意味着他们父母身高的75％。但是：父母实际上没有高度，或者至少不够快。未指定父级的高度（默认情况下为auto），这意味着它的高度取决于其内容的高度。但内容的高度75%基于父级。它是循环依赖，因此浏览器放弃了。

但iframe / object的身高受75%影响，而第一div则不受target="_top"影响。我无法解释。
遗憾的是，无法在框架内进行导航。 w3schools.org上的所有链接都有object，这是一个不在任何框架内导航的明确请求。

关于iframe元素：我认为您使用object而不是object会更好。使用{{1}}加载HTML是不寻常的，非标准的。

Answer 3

当您将元素的大小设置为75％时，它将是其第一个具有常量大小的父元素的75％。

如果将body元素的大小设置为100px，那么div将扩展为每个75px。

如果你不确定你的身体的大小，你可以用jQuery缩放div 通过获取文档/窗口高度并将div设置为75％（参见jQuery文档。）

关于导航问题，我可能有一个解决方法。向w3schools网站做一个http获取请求并获取html，然后查看所有链接并按照您认为合适的方式替换它们，然后将html粘贴到正确的div中。

为什么<div>的高度不同？</div>

3 个答案: