CSS div部分重叠

Question

I'm trying to put together a page that has a Header, navigation tabs that float over the bottom of the header, body content and then a footer. 我正在尝试将一个包含页眉，浮动在页眉底部的导航选项卡，正文内容和页脚的页面放在一起。 This should be fairly easy, but I'm running into a strange result. 这应该相当容易，但是我遇到了一个奇怪的结果。

The menu has to float over the header image, as that image may be static, or it may be a slider... or it may be an embedded Google map. 菜单必须浮动在标题图像上，因为该图像可能是静态的，也可能是滑块...或者可能是嵌入式Google地图。

I've mocked up the code below and essentially the CSS for it. 我已经模拟了下面的代码，并且实质上是CSS。 The problem is that even though I have the footer set to the bottom, when I view the page and the body has enough content, the footer seems to be floating over the body content and the body content extends past the bottom of the footer. 问题是，即使我将页脚设置在底部，但是当我查看页面并且主体具有足够的内容时，页脚似乎漂浮在主体内容上，并且主体内容超出了页脚的底部。

Here is my code. 这是我的代码。

Would appreciate someone smarter than me looking at this and making any suggestions. 非常感谢比我更聪明的人，看着我并提出任何建议。

<style>
#header{
    width: 100%;
    height: 350px;
    position: absolute;
    top: 0;
    left: 0;
    padding:0;
    margin: 0;
}
#header > img{
    width: 100%;
}

.mynavigation{
    margin-left: auto;
    margin-right: auto;
    color: #fff;
}

.mynavigation li {
    display: inline-block;
    text-decoration: none;
    padding: 15px 25px 30px 25px;
    z-index: 100;
    color: #fff;
    margin-top: 310px;
    font-family: avenirltstd-black;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.mynavigation li.is-active {
    color: #474747;
    background-color: #fff;
} 

.mynavigation li a{
color: #fff;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #474747;
    text-align: center;
}


</style>



<div id="header">
    <img src="/images/myimage" />
</div>


<div id="mynavigation">
    <!-- css makes this a tab menu and it needs to position at the bottom of the image <div>  -->
    <!-- so it looks like a white tab that is merged wit the whit body to look as if they are whole/together  -->
    <ul>
        <li>Home</li>
        <li>Examples</li>
        <li>Other</li>
        <li>Last</li>
    </ul>
</div>


<div id="bodycontent">
   <!-- page content goes here and has a white background  -->
</div>


<div id="footer">
    <!-- footer content here -->
</div>

Answer 1

Working Fiddle http://jsfiddle.net/u2qL4j8a/2/ You had wrongly mentioned the CSS selector for navigation and footer as classes whereas in the HTML you have mentioned these as IDs. 工作小提琴http://jsfiddle.net/u2qL4j8a/2/您错误地将用于导航和页脚的CSS选择器作为类提及，而在HTML中您将其作为ID提及。

#header{
    width: 100%;
    height: 350px;
    position: absolute;
    top: 0;
    left: 0;
    padding:0;
    margin: 0;
}
#header > img{
    width: 100%;
}

#mynavigation{
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
}

#mynavigation li {
    display: inline-block;
    text-decoration: none;
    padding: 15px 25px 30px 25px;
    /*z-index: 100;
    color: #fff;
    margin-top: 310px;*/
    font-family: avenirltstd-black;
    text-transform: uppercase;
    letter-spacing: 5px;
}

#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #474747;
    text-align: center;
}

Answer 2

Make your HTML structure like so: 使您的HTML结构如下所示：

<html>
    <head>
    </head>
    <body>
        <div id="header"></div>
        <div id="mynavigation"></div>
        <div id="content">
            <!-- CONTENT STUFF -->
        </div>
        <div id="footer"><!-- FOOTER STUFF --></div>
    </body>
</html>

...And your CSS like so: ...而您的CSS像这样：

html{
    padding: 0;
    margin: 0;
}

body{
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#header{
    width: 100%;
    height: 350px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

#mynavigation{
    position: absolute;
    top: 350px;
    height: 50px;
    width: 100%;
}

#content{
    position: absolute;
    top: 350px;
    bottom: 100px;
    width: 100%;
    overflow: auto;
}

#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
}

CSS div部分重叠

问题描述

2 个解决方案

解决方案1
1 2014-11-30 07:26:47

解决方案2
0 2014-11-30 05:57:06

CSS div部分重叠

问题描述

2 个解决方案

解决方案1 1 2014-11-30 07:26:47

解决方案2 0 2014-11-30 05:57:06

解决方案1
1 2014-11-30 07:26:47

解决方案2
0 2014-11-30 05:57:06