Question

所以在这里发生了一些奇怪的事情......我在我的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点缀;} 至 div {position：relative;}

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

由于

Answer 1

尝试使用透明度添加带颜色的边框。

border: 1px dashed transparent;

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

使用像width: auto;这样的高度也会使元素使用新的2像素。

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

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

如果设置不同的颜色，则可以轻松检查布局和背景颜色，但不会影响元素的大小。

Answer 2

#main中出现错误 - 您没有为position属性包含值..

从div中删除边框会使其隐藏

2 个答案: