1

所以这里发生了一些奇怪的事情……我的 div 上有边界进行测试，所以我可以看到它们从哪里开始和结束。一旦我删除了边框，我的 div 内容之一就会消失，我不明白为什么......

这是我的主要 html 文件

<!DOCTYPE html>
<html>
    <head>
        <title>EasyZag Admin</title>

        <!-- add the jQuery script -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <!-- add the jQWidgets framework -->
        <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
        <!-- add the css themes -->
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
        <link href="stylesheets/basic.css" media="all" rel="stylesheet" type="text/css" />
        <link href="jqwidgets/styles/jqx.darkblue.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <div id='container'> 
            <div id="header">
                <div id='logo'>
                <img src="ezag_logo.jpeg" alt="eZag">
                </div>
                <script type="text/javascript">
                    $(document).ready(function () {
                        // Create a jqxMenu and set its width and height.
                        $("#jqxmenu").jqxMenu({ height: 30 , theme: 'darkblue'});
                        $("#main").height($('#container').height() - $('#header').height() - $('#footer').height() - 10);
                    });
                    $(window).resize(function() {
                        $("#main").height($('#container').height() - $('#header ').height() - $('#footer').height() - 10);
                    });
                </script>

                <div id='jqxmenu'>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li>Clients
                            <ul>
                                <li><a href="#">Add Client</a></li>
                                <li><a href="#">All Clients</a></li>
                                <li><a href="#">Search</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Logout</a></li>
                    </ul>
                </div>
            </div><br />

            <div id="main">
                <?php
                    if(isset($_GET['section'])) {
                        //include which section
                    } else {
                        include "default.php";
                        echo "hello";
                    }
                ?>
            </div>

            <div id="footer">
                <center>Copyright 2012, EasyZag</center>
            </div>
        </div>
    </body>
</html>

这是我的 CSS 文件

body, html { height: 99%; width: 99%;}
div {position: relative; border: 1px dotted;}   

#container {width: 100%; height: 100%; background-color:#E8F4FF; border-radius:25px; border: solid; border-color: } 
#header { float: left; height: 80px; width: 100%; }
#logo {float: left; width: 225px; height: 70px; padding-left: 10px; padding-top: 10px;}
#jqxmenu {float: left; position: relative; top: 40px; left: 0px; }
#main {position: width: 100%; height: 50%; overflow: auto;}
#footer {float: left; width: 100%; position: absolute; bottom: 0;}

最后所有的 php 包括如下：

Welcome to EasyZag Admin!<br />
<br />
Goals:<br />
<br />

有谁知道为什么只是改变 div {position: relative; 边框：1px dotted;} 到 div {position: relative;}

在我的css文件中会完全删除包含php的div吗？

谢谢

4

2 回答 2

0

尝试添加具有透明度的颜色边框。

border: 1px dashed transparent;

由于您使用了 1px 的边框，这意味着您在垂直和水平方向上有 2 个额外的像素。换句话说，如果您删除边框。如果您正在使用，width = something那么您的元素可能不会放置在过去的位置。

使用类似width: auto;和高度的东西也会使元素使用新的 2 像素。

使用透明颜色可能不是一个好主意，但它可以确保您的边框存在并且您仍然像以前一样使用那 2 个额外的像素......但它们是透明的。如果您使用背景颜色。重构你的css可能会更好。

另一方面，我可能会建议使用背景而不是边框​​来检查您的元素在哪里。

如果您设置不同的颜色，将很容易检查您的布局，背景颜色不会影响元素的大小。

于 2012-07-14T22:08:03.143 回答
0

#main 中有一个错误 - 您没有包含 position 属性的值..

于 2012-07-14T22:12:34.530 回答