页脚穿过div的中间-Footerrunsthroughmiddleofdiv

I've spent the past two days troubleshooting this problem for my portfolio website, and have yet to find a solution.

我花了两天时间为我的投资组合网站解决这个问题，并且还没有找到解决方案。

The basic structure of the page is a header, a wrapper for content (nav bar and content divs), and the footer. The problem is that the footer is cutting through the middle of the wrapper div, making the content run around and below the footer. I would post a screenshot, but I don't have enough reputation.

页面的基本结构是标题，内容包装器（导航栏和内容div）和页脚。问题是页脚正在切割包装div的中间，使内容在页脚的周围和下方运行。我会发布截图，但我没有足够的声誉。

It looks like the div containing the résumé info is the only one causing the problem, whereas the footer is only corresponding to the nav bar.

看起来包含简历信息的div是导致问题的唯一一个，而页脚仅对应于导航栏。

Code is below.

代码如下。

Additional info: When I tried setting the footer's position to fixed, it disappears completely from the page. I also tried removing the .wrapper div and just using the content divs. I also tried changing the positions of the divs to absolute and relative.

附加信息：当我尝试将页脚的位置设置为固定时，它会从页面中完全消失。我也尝试删除.wrapper div并只使用内容div。我也尝试将div的位置改为绝对和相对。

HTML

    
    
            

                
Kyle Simmonds
                
Copywriting, Graphic Design and Web Development
            
    





    

    


        
ABOUT ME
            


        
EXPERIENCE
            
Gulliver's Travel
            

                
Social Media Intern
                
January–August '12
                
// Established and managed company's Facebook and Twitter pages
                
// Created graphics for emails and promotions
            

            
TCU Schieffer School of Journalism
            

                
Website Assistant
                
August '09–December '12
                
// Uploaded content onto the school's website through HTML and CSS
                
// Managed the site by keeping it free of visual and typographical errors
            

            
TCU Student Activities
            

                
Graphic Designer
                
September '10–December '12
                
// Designed posters for campus-wide events
                
// Created invitations and printed materials for special events
            

            
Peaceable Kingdom Retreat for Children
            

                
Summer Staff
                
Summer '10–'11
                
// Facilitated activities for campers including high-ropes courses (zip line and rock climbing) and pool activities
                
// Ensured a safe and fun environment for campers by being lifeguard, CPR and high-ropes certified
            

  
        
SKILLS
            

                
// Advertising
                
// Copywriting/editing
                
// Graphic Design
                
// Photoshop
                
// InDesign
                
// Illustrator
                
// Web Development
                
// HTML
                
// CSS
                
// jQuery
                
// Audio/Video Editing
            


        
EDUCATION
            
Texas Christian University
            

                
December '12
                
// BS Strategic Communication
                
// Music Minor
                
// Studies in Italian
            

    

CSS

body{
font-family:'OpenSans', sans-serif;
margin:0 auto;
padding:0px;
width:100%;
height:100%;
}

a, a:hover,a:active,a:visited{
text-decoration:none;
color:#000;
}

header{
width:100%;
height:70px;
background:#000;
margin:0 auto;
padding:0px;
}

    header h1{
        margin:0 0 0 10px;
        }

    header h4{
        font-weight:300;
        margin:10px;
        }

            header ul{
                width:960px;
                margin:0px 0 0 0;
                padding:8px 0 0 50;
                overflow:hidden;
                }

            header li{
                list-style:none;
                display:inline;
                }

                    #title{
                        font-size:36px;
                        color:#fff;
                        }

                    #subtitle{
                        font-size:12px;
                        font-weight:lighter;
                        font-style:italic;
                        color:#ddd;
                        }

.wrapper{
height:100%;
width:960px;
margin:0 auto;
margin-bottom:10px;
padding:0px;
position:relative;
}

    nav{
        height:100%;
        width:300px;
        margin:0 auto;
        float:left;
        padding:10px;
        }

            nav .firstlevel{
                height:100%;
                margin:0px;
                padding:0px;
                display:block;
                border-right:solid 2px #000;
                float:left;
                }

            nav .firstlevel li{
                list-style-type:none;
                font-weight:lighter;
                font-size:16px;
                padding:10px;
                }

                    nav .secondlevel ul{
                        display:inline;
                        }

                    nav .secondlevel li{
                        font-size:12px;
                        margin:0 0 0 -30px;
                        padding:10px;
                        }

    .content{
        height:100%;
        width:600px;
        margin:10px 0 0 50;
        padding:0px;
        position:absolute;
        }

            .content p{
                font-size:12px;
                }

                hr{
                    border:0;
                    height:1px;
                    background:#aaa;
                    }

                    #resume{
                        display:inline;
                        }

                            #resume h2{
                                font-size:16px;
                                color:#aaa;
                                margin-bottom:5px;
                                padding:0;
                                }

                            #resume h4{
                                font-size:14px;
                                color:#444;
                                margin-top:15px;
                                margin-bottom:0;
                                }

                            #resume ul{
                                margin:0 0 0 0px;
                                }

                                    #jobtitle{
                                        font-weight:bold;
                                        font-size:16px;
                                        margin:3px 0 0 0;
                                        }

                                    #subhead{
                                        color:#aaa;
                                        }

                            #resume li{
                                font-size:12px;
                                list-style:none;
                                display:block;
                                margin:0;
                                padding:0;
                                }

footer{
background-color:#000;
height:6%;
width:100%;
margin:0 auto;
margin-bottom:0px;
padding:0px 0 0 0;
position:absolute;
clear:both;
}

    footer p{
        position:relative;
        font-size: 10px;
        color:#fff;
        text-align:right;
        margin:8px 10 0 0;
        }

Also, if you have suggestions for making this a better question, or for better code, please let me know. Thank you for any help.

另外，如果您有建议将此问题作为更好的问题或更好的代码，请告知我们。感谢您的任何帮助。

2 个解决方案

body{
    font-family:'Open Sans', sans-serif;
    margin:0 auto;
    padding:0;
    width:100%;
    height:100%;
}

a, a:hover, a:active, a:visited{
    text-decoration:none;
    color:#000;
}

header{
    width:100%;
    height:70px;
    background:#000;
    margin:0 auto;
    padding:0;
}

    header h1{
        margin:0 0 0 10px;
    }

    header h4{
        font-weight:300;
        margin:10px;
    }

    header ul{
        width:960px;
        margin:0;
        padding:8px 0 0 50;
        overflow:hidden;
    }

    header li{
        list-style:none;
        display:inline;
    }

#title{
    font-size:36px;
    color:#fff;
}

#subtitle{
    font-size:12px;
    font-weight:lighter;
    font-style:italic;
    color:#ddd;
}

.wrapper{
    height:100%;
    width:960px;
    margin:0 auto 10px;
    padding:0;
    position:relative;
}

nav{
    height:100%;
    width:300px;
    margin:0 auto;
    float:left;
    padding:10px;
}

    nav .firstlevel{
        height:100%;
        margin:0px;
        padding:0px;
        display:block;
        border-right:solid 2px #000;
        float:left;
    }

    nav .firstlevel li{
        list-style-type:none;
        font-weight:lighter;
        font-size:16px;
        padding:10px;
    }

    nav .secondlevel ul{
        display:inline;
    }

    nav .secondlevel li{
        font-size:12px;
        margin:0 0 0 -30px;
        padding:10px;
    }

.content{
    height:100%;
    width:600px;
    margin:10px;
    padding:0;
    padding-left:300px;
}

    .content p{
        font-size:12px;
    }

hr{
    border:0;
    height:1px;
    background:#aaa;
}

#resume{
}

    #resume h2{
        font-size:16px;
        color:#aaa;
        margin-bottom:5px;
        padding:0;
    }

    #resume h4{
        font-size:14px;
        color:#444;
        margin-top:15px;
        margin-bottom:0;
    }

    #resume ul{
        margin:0 0 0 0px;
    }

    #resume li{
        font-size:12px;
        list-style:none;
        display:block;
        margin:0;
        padding:0;
    }

#jobtitle{
    font-weight:bold;
    font-size:16px;
    margin:3px 0 0 0;
}

#subhead{
    color:#aaa;
}

footer{
    background-color:#000;
    height:6%;
    width:100%;
    margin:0 auto;
    margin-bottom:0px;
    padding:0;
    position:absolute;
    clear:both;
}

    footer p{
        position:relative;
        font-size: 10px;
        color:#fff;
        text-align:right;
        margin:8px 10 0 0;
    }