Divs重叠，正确的位置页脚正确和定位的一般问题

时间：2014-03-18 14:04:04

标签： css html

我似乎无法将我的页脚div粘贴到页面底部，我不希望它固定为滚动窗口，只是在文档的底部。它似乎浮在我的主要内容的顶部。我也很难让div排队，他们似乎都在顶部和底部都有填充。我错过了标记中的某些内容吗？

这是我的HTML 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>The Frag Factory</title>
<div class="header">
    <div class="logo">
        <img src="includes/images/tffLogo.jpg"/>
    </div>
    <div class="nextLan">
        The Next LAN is on April 21-24th in
        </br><span>00d.00h.00m.00s</span>
    </div>
</div>
</head>
<body

<div class="navContainer">
    <ul>
        <li><a href="#">Events</a> |</li>
        <li><a href="#">Contact Us</a> |</li>
        <li><a href="#">Next Lan</a> |</li>
        <li><a href="#">Sponsers</a> |</li>
        <li><a href="#">Servers</a> |</li>
        <li><a href="#">Community</a></li>
    </ul>
</div>


<div class="container">
    <div class="sliderContainer">
        <img src="includes/images/sliderImage1.jpg"/>
    </div>
    <vertical around themdiv class="mainContainer">
        <h1>MAIN CONTENT</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor, turpis faucibus ultrices mollis, nisl lectus fermentum orci, pulvinar vehicula neque metus vel leo. Praesent semper ullamcorper dolor, quis scelerisque neque venenatis quis. Vestibulum lacinia ut dolor ac fermentum. Pellentesque ornare facilisis ultrices. Donec vel purus eleifend, euismod metus in, faucibus sem. Nullam nulla odio, tristique sed velit vitae, pretium feugiat nibh. Sed a odio leo. Nullam eget enim pulvinar magna volutpat scelerisque eget nec est. Quisque sagittis tincidunt orci. Suspendisse ac erat ut turpis luctus euismod et eget dolor. Duis cursus, erat sed condimentum venenatis, purus urna sodales augue, vitae viverra purus augue sed tortor. Nullam adipiscing dapibus ultricies. In hac habitasse platea dictumst.</p>
    </div>
    <div class="sideBar">
        <center><img src="http://www.placehold.it/150x150"/>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor, turpis faucibus ultrices mollis, nisl lectus fermentum orci, pulvinar vehicula neque metus vel leo. </p>
    </div>

</div>
<footer>
    <div id="footerContainer">
        THIS IS A FOOTER
    </div>
</footer>

</body>




</html>

我的CSS 

body{
    font-family: helvetica;
    letter-spacing: 0.09px;
    color: #717171;
    background-image: url("includes/images/dark_mosaic.png");
    display:block;
}
h1{}
h2{}
h3{}
p{}

.clear{
    clear:both;
}

/*HEADER*/
.header{
    width:900px;
    margin:0 auto;
    height:75px;
    background-color: #000;

}
.logo{
    float:left;
}
.logo img{
    height:70px;
    width:auto;
}
.nextLan{
    float:right;
    color:#36B627;
    text-align: center;
    padding-right:20px;
    padding-top: 6px;
}
.nextLan span{
    font-size: 40px;
    font-weight: bolder;
    vertical-align: center;
}

/*NAVIGATION*/
.navContainer{
    background-color: #535353;
    width:900px;
    height:25px;
    margin:0 auto;
    line-height: 25px;
    text-align:center;
    position: relative;
    top:-9px;


}
.navContainer li{
    display:inline;
}

/*SLIDER*/
.sliderContainer{
    width:900px;
    margin:0 auto;

}
.sliderContainer img{
    width:900px;
    height:auto;
}

/*MAINCONTENT*/


.container{
    width:900px;
margin:0 auto;
position: relative;


}
.mainContainer{
    width:680px;
    background-color: #000;
    float:left;
    padding:10px;
}
.sideBar{
    width:170px;
    background-color: #D66767;
    float:left;
    padding:10px;
    margin-left: 10px;
}
/*FOOTER*/

#footerContainer{
    position:absolute;
    height: 180px;
    clear:both;
    background-color: #fff;
    width:100%;
    padding:0;
    margin:0;
    left:0;

}

3 个答案:

答案 0 :(得分：1)

好的，我将尝试将您的评论汇编成一个答案：

首先，您HTML的大部分内容无效。 <div>标记和内容未包含在<head>部分中。所有内容（包括标题）必须包含在文档的部分中。使用<head>获取元信息（有关文档的信息），例如<Title>，任何CSS链接，脚本等。您有一些奇怪的事情：您的HTML中有一个标记（你应该使用CSS代替），它甚至都没有关闭。线vertical around themdiv对我来说甚至没有意义;它肯定无效HTML。我猜这是一个你不想插入的主要拼写错误。

其次，您的<br>标记不正确。它要么必须只是br>（对于HTML5），要么<br/>对于XHTML。你不应该使用</br>。这是HTML4.01和之前的标签的结束版本......让我们希望你没有使用HTML4标准！

要解决您的页脚问题，请尝试CSS Sticky Footer。它现在不在您内容的底部，因为您正在使用position: absolute;，它会从文档的正常流中删除页脚，并将其明确地放在文档中的某个特定位置，而不管其他任何内容，之前或之后。

这是一个更新的 JSFiddle ，试图解决您的主要问题。请注意，在JSFiddle链接中，<!doctype>，<html>和<head>标记已被删除，因为它们不是必需的。

最后，如果你的CSS中有空元素（例如p {}和h1 {}），你应该删除它们，而不是留下它们。如果您最终需要设置这些元素的样式，您可以随时重新添加它们。

答案 1 :(得分：0)

不要使用不必要的div和css。选中此作为参考http://css-tricks.com/snippets/css/sticky-footer/

答案 2 :(得分：0)

好吧，我处理了你的HTML，它有几个错误/无效的HTML。不要试图解释一切，而是看看this demo。

你遇到的主要问题是你需要一个包装器周围的包装器，然后将其高度设置为100％，边缘底部为-180px（页脚的高度）。您还需要删除页脚的绝对位置，这是不需要的。

更新：我花了一些时间，找到了一个更好的解决方案，希望能够解决你所有的问题。我之前提到的页脚会将其保留在内容的底部，但不一定是页面的底部。制作页脚的最佳方法是使html和body的高度均为100％，容器的高度为100％（在您的情况下使用最小高度以防止页脚在未最大化时“吃页面”并且页脚上的负上边距相当于其高度。 Here是此操作的更新演示。我还更新了以下代码以匹配演示。如果您有任何问题，请随时提出。

HTML 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>The Frag Factory</title> 
</head>
<body>
<div class="container">
<div class="header">
    <div class="logo">
        <img src="includes/images/tffLogo.jpg"/>
    </div>
    <div class="nextLan">
        The Next LAN is on April 21-24th in
        <br/><span>00d.00h.00m.00s</span>
    </div>
</div>

<div class="navContainer">
    <ul>
        <li><a href="#">Events</a> |</li>
        <li><a href="#">Contact Us</a> |</li>
        <li><a href="#">Next Lan</a> |</li>
        <li><a href="#">Sponsers</a> |</li>
        <li><a href="#">Servers</a> |</li>
        <li><a href="#">Community</a></li>
    </ul>
</div>

<div class="sliderContainer">
    <img src="includes/images/sliderImage1.jpg"/>
</div>
<div class="mainContainer">
    <h1>MAIN CONTENT</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor, turpis faucibus ultrices mollis, nisl lectus fermentum orci, pulvinar vehicula neque metus vel leo. Praesent semper ullamcorper dolor, quis scelerisque neque venenatis quis. Vestibulum lacinia ut dolor ac fermentum. Pellentesque ornare facilisis ultrices. Donec vel purus eleifend, euismod metus in, faucibus sem. Nullam nulla odio, tristique sed velit vitae, pretium feugiat nibh. Sed a odio leo. Nullam eget enim pulvinar magna volutpat scelerisque eget nec est. Quisque sagittis tincidunt orci. Suspendisse ac erat ut turpis luctus euismod et eget dolor. Duis cursus, erat sed condimentum venenatis, purus urna sodales augue, vitae viverra purus augue sed tortor. Nullam adipiscing dapibus ultricies. In hac habitasse platea dictumst.</p>
</div>
<div class="sideBar">
    <img src="http://www.placehold.it/150x150"/>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor, turpis faucibus ultrices mollis, nisl lectus fermentum orci, pulvinar vehicula neque metus vel leo. </p>
</div>

</div>

<footer>
    <div id="footerContainer">
        THIS IS A FOOTER
    </div>
</footer>

</body>

</html>

CSS 

    html, body {
        height: 100%;
        min-height: 100%;
        width: 100%;
    }
    body{
        font-family: helvetica;
        letter-spacing: 0.09px;
        color: #717171;
        background-image: url("includes/images/dark_mosaic.png");
        display:block;
        margin: 0;
    }
    h1{}
    h2{}
    h3{}
    p{}

    .clear{
        clear:both;
    }

    /*HEADER*/
    .header{
        margin:0 auto;
        height:75px;
        background-color: #000;

    }
    .logo{
        float:left;
    }
    .logo img{
        height:70px;
        width:auto;
    }
    .nextLan{
        float:right;
        color:#36B627;
        text-align: center;
        padding-right:20px;
        padding-top: 6px;
    }
    .nextLan span{
        font-size: 40px;
        font-weight: bolder;
        vertical-align: center;
    }

    /*NAVIGATION*/
    .navContainer{
        background-color: #535353;
        width:900px;
        height:25px;
        margin:0 auto;
        line-height: 25px;
        text-align:center;
        top:-9px;


    }
    .navContainer li{
        display:inline;
    }

    /*SLIDER*/
    .sliderContainer{
        margin:0 auto;
        height: auto;
    }

    /*MAINCONTENT*/


    .container{
        width:900px;
        margin: auto;
        height: 100%;
        min-height: 750px;
    }
    .mainContainer{
        width:680px;
        background-color: #000;
        float:left;
        padding:10px;
    }
    .sideBar{
        width:170px;
        background-color: #D66767;
        float:left;
        padding:10px;
        margin-left: 10px;
    }
    /*FOOTER*/

    #footerContainer{
        height: 180px;
        margin-top: -180px;
        text-align: center;
        background-color: #000;
        width:100%;
        min-width: 900px;
    }
相关问题
最新问题