Question

我想在编辑期间将我的div类（.background_header，.background_content，.background_footer）叠加在一起。在下面的链接中，您可以看到它们堆叠正常，标题高度为100vh，内容为85vh，页脚为50vh。

http://www.hosting-mate.com/downloads/img1.png

但是，在下图中，当我想在Dreamweaver中编辑它时，它显示完全不同！我已经尝试将类位置值设置为“相对”，但仍然无效。

http://www.hosting-mate.com/downloads/img2.png

<style type="text/css">
body {
    background-color: #191919;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
</style>
</head>

<!-- Content starts here -->

<body>

<div class="background_header">
    <div id="header_bg">
        <div id="border_l"><img src="http://www.hosting-mate.com/dkselectricalanddata/_assets/border_left_light.png" /></div>
        <div id="logo"><a href="http://www.dkselectricalanddata.com.au/"><img src="http://www.hosting-mate.com/dkselectricalanddata/_assets/logo_color_sml.png" /></a></div>
        <div id="border_r"><img src="http://www.hosting-mate.com/dkselectricalanddata/_assets/border_right_light.png" /></div>
        <div id="scroll"><img src="http://www.hosting-mate.com/dkselectricalanddata/_assets/scroll.png" /></div>
    </div>
</div>
<div class="background_content">
    <div id="content_bg">
        <div id="border_content_top"><img src="http://www.hosting-mate.com/dkselectricalanddata/_assets/content_border_top.png" /></div>
        <div id="form"></div>
  </div>
</div>
<div class="background_footer">
    <div id="footer_bg">
        <div id="border_footer_top"><img src="http://www.hosting-mate.com/dkselectricalanddata/_assets/footer_border_top.png" /></div>
        <div id="icons"><img src="http://www.hosting-mate.com/dkselectricalanddata/_assets/icon_phone.png" /><img src="http://www.hosting-mate.com/dkselectricalanddata/_assets/icon_email.png" /></div>
        <div id="text"></div>
    </div>
</div>

</body>

<!-- Content ends here -->
</html>

下面是我的样式表代码

@charset "utf-8";

img, object, embed, video {
    max-width: 100%;
}
.ie6 img {
    width:100%;
}
.background_header {
    height: 100vh;
    width: 100vw;
    position: relative;
    overflow: hidden;
    display: block;
    z-index: 100;
}


.background_content {
    height: 85vh;
    width: 100vw;
    position: relative;
    overflow: hidden;
    display: block;
    z-index: 50;
}

.background_footer {
    height: 50vh;
    width: 100vw;
    position: relative;
    overflow: hidden;
    display: block;
    z-index: 0;
}

@media only screen and (min-width: 769px) {
/* Header Content Starts*/
#header_bg {
    position: absolute;
    margin: 0;
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
#border_l {
    position: absolute;
    left: 0px;
    top: 50%;
    right: 75%;
    width: 25%;
    bottom: 0%;
    overflow: hidden;
    text-align: left;
}
#logo {
    position: absolute;
    width: 50%;
    left: 25%;
    right: 25%;
    top: 37%;
    bottom: 35%;
    text-align: center;
}
#border_r {
    position: absolute;
    left: 75%;
    top: 0%;
    right: 0%;
    width: 25%;
    bottom: 50%;
    overflow: visible;
    text-align: right;
}
#scroll {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 0px;
}
/* Header Content Ends */



/* Form Content Starts */
#content_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #FFF;
}
/* Form Content Ends */



/* Footer Content Starts */
#footer_bg {
    position: absolute;
    width: 100%;
    height: 100%;
}
/* Footer Content Ends */}

非常感谢任何有关此事的帮助。

谢谢！

编辑与最终产品不同

0 个答案: