0

I'm sure it is to do with the positioning but I cannot resolve the issue. Body and footer comes on top of each other at the end of the page. How can I make body liquid so it doesn't overlap with footer?

Thanks

JSFIDDLE is here.

CSS

*
{
    margin: 0px;
    padding: 0px;
}
div
{
    display: block;
}

/* --- BODY ------------------------------------------------ */
#body_block
{
    float: left;
    width: 100%;
    background: #EEEEEE;
    /*background-image: url('../images/bg3.jpg');*/
}
#body
{
    margin: 0 auto;
    position: relative;
    width: 900px;
    /*background: #BB0099;*/
}
#body_title
{
    position: absolute;
    top: 15px;
    left: 0px;
    width: 200px;
    /*height: 24px;*/
    background: #aa99ff;
}
#body_search
{
    position: absolute;
    top: 15px;
    right: 0px;
    width: 200px;
    /*height: 24px;*/
    background: #aa99ff;
}
#body_content
{
    position: relative;
    top: 50px;
    left: 0px;
    width: 900px;
    /*height: 24px;*/
    background: #aa99ff;
}

/* --- FOOTER ---------------------------------------------- */
#footer_block
{
    float: left;
    width: 100%;
    /*background: #DDDDDD;*/
}
#footer
{
    margin: 0 auto;
    position: relative;
    width: 900px;
    padding: 15px 0px 15px 0px;
    /*background: #CC0011;*/
}

HTML

<body>

    <div id="body_block">
        <div id="body">
            <div id="body_title"><h1>Home</h1></div>
            <div id="body_search"><h1>Search</h1></div>
            <div id="body_content">
                TOP<br /><br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br /><br />BOTTOM
            </div>
        </div>
    </div>

    <div id="footer_block">
        <div id="footer">FOOTER</div>
    </div>

</body>
4

4 回答 4

1

As @DavidMillar said, clearing the floats on the footer will solve the overlap problem. However, I suspect that you can achieve the design you want a lot more straightforwardly by using some of the design elements as intended.

* {
    margin: 0px;
    padding: 0px;
}

#body {
    background: #EEEEEE;
    margin: 0 auto;
    position: relative;
    width: 900px;
    /*background: #BB0099;*/
}

#body_title {
    float: left;
    width: 200px;
    /*height: 24px;*/
    background: #1199ff;
}

#body_search {
    float: right;
    width: 200px;
    /*height: 24px;*/
    background: #aa11ee;
}

#body_content {
    clear: both;
    width: 900px;
    /*height: 24px;*/
    background: #aa99ff;
}

#footer {
    width: 900px;
    padding: 15px 0px 15px 0px;
    background: #CC0011;
}

To summarize:

  1. divs are block by default, no need to specify
  2. setting margin/padding = 0 on * will apply it all elements: No need to reapply individually.
  3. The #body_title and #body_search can be floated left/right to keep them where you want them.
  4. Need to clear both floats on the #body_content so it goes back into document flow
  5. No need to add position: relative unless you plan on moving the elements around. As now everything is in document flow (except two floats at top) no need to position them.

I also removed the wrappers from the body and footer because I felt they were unnecessary, but you can easily add them back in. :)

Check out the new fiddle: http://jsfiddle.net/dR82X/

于 2013-09-04T15:54:12.047 回答
0

If you implement the code from the "sticky footer" solution, you will also solve your own problem.

This is a description of the sticky footer, and how to resolve it: http://ryanfait.com/sticky-footer/

Also:

CSS Only solution
CSS Tricks' solution

于 2013-09-04T15:45:52.437 回答
0

It only appears the footer is overlapping the body because you've positioned the contents within the body to appear 50px down from its original location. (e.g. position:relative;top:50px;)

Although the footer isn't actually overlapping the content, you can ensure that it starts below the body by adding clear:both; to the footer CSS so it will clear the previous floated elements before being drawn.

于 2013-09-04T15:49:48.063 回答
0

So, there are many ways to get the layout that you want. This is one of the simplest, using floats. Floating left will stack items up against the left edge of the container, and floating right will stack them up against the right side (note, they will stack next to each other until they run out of space, then start stacking beneath that row, this way you can stack a menu of links next to each other, for example). Using clear causes the element to push below any floating elements that precede it inside the containing element. So you can float one link left, one right, then clear the content below them both.

If you wished to absolute

Fiddle: http://jsfiddle.net/mBwP8/1/

Code:

/* --- GENERAL --------------------------------------------- */
* {
    margin: 0px;
    padding: 0px;
}

/* --- BODY ------------------------------------------------ */
#body_block {
    background: #EEEEEE;
}
#body {
    margin: 0 auto;
    position: relative;
    width: 900px;
    padding-top: 15px;
}
#body_title {
    float: left;
    width: 200px;
    background: #1199ff;
}
#body_search {
    float: right;
    width: 200px;
    background: #aa11ee;
}
#body_content {
    clear: both;
    width: 900px;
    background: #aa99ff;
}

/* --- FOOTER ---------------------------------------------- */
#footer_block {
    float: left;
    width: 100%;
}
#footer {
    margin: 0 auto;
    width: 900px;
    padding: 15px 0px 15px 0px;
    background: #CC0011;
}

If you wished to absolute position the top links, you could do something like the following, but it's not necessary. Read up on css floats and positioning relative and absolute. They can be tricky to get, but you'll love it once you do!

Fiddle: http://jsfiddle.net/ZRwqH/

Code:

/* --- GENERAL --------------------------------------------- */
* {
    margin: 0px;
    padding: 0px;
}

/* --- BODY ------------------------------------------------ */
#body_block {
    background: #EEEEEE;
}
#body {
    margin: 0 auto;
    position: relative; /* now we need relative here, so the *absolute positioning* of the header is *relative* to this element */
    width: 900px;
    padding-top: 55px; /* and we need to pad this because absolute positioning takes the header out of the document flow */
}
#body_header {
    position: absolute; /* taking this out of the document flow, but pushing it to the top of the (relative) container */
    top: 0;
    left: 0;
    width: 100%; /* abs positioning causing width to collapse, 100% pushes it back out to the full width of the (relative) container */
    padding-top: 15px; /* the extra space at the top */
}
#body_header > div { /* to make all the "menu" links the same dimensions */
    width: 200px;
    height: 40px;
}
 /* we can now float *inside* of the abs positioned header, note that the header element will collapse 
    to zero + padding height unless you take steps to clear or contain these floats, but since the header
    isn't needed for border or background color we don't care in this case. */
#body_title {
    float: left;
    background: #1199ff;
}
#body_search {
    float: right;
    background: #aa11ee;
}
#body_content {
    clear: both;
    width: 900px;
    background: #aa99ff;
}

/* --- FOOTER ---------------------------------------------- */
#footer_block {
    width: 100%;
}
#footer {
    margin: 0 auto;
    width: 900px;
    padding: 15px 0px 15px 0px;
    background: #CC0011;
}
于 2013-09-04T16:38:19.530 回答