Question

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

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

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

代码如下。

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

HTML

<!DOCTYPE html5>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel='icon' href='/favicon.png' />
<link rel='stylesheet' href='main.css' />
<link rel='stylesheet' href='webfonts.css' />

<title>Kyle Simmonds: Design, Writing and Web</title>

</head>
<body>

<header>
    <!--<a class='headerlogo' href="http://kylesimmonds.com"><h1>Kyle Simmonds</h1></a>-->
    <a href='index.html'>
            <ul>
                <li id='title'>Kyle Simmonds</li>
                <li id='subtitle'>Copywriting, Graphic Design and Web Development</li>
            </ul>
    </a>
</header>

<div class='wrapper'>

<!-- NAVIGATION BAR -->
    <nav>       
            <ul class='firstlevel'>
                <li><a href='index.html'>Home</a></li>
                <li><a href='resume.html'>R&eacute;sum&eacute;</a></li>
                <li><a href='portfolio.html'>Portfolio</a></li>
                <li><a href='blog.html'>Musings</a></li>
                <li><a href='contact.html'><font color='#f00'>Contact Me</font></a>
                    <ul class='secondlevel'>
                        <li>Email: <a href='mailto:kbsimmonds@gmail.com'>kbsimmonds@gmail.com</a></li>
                    </ul>
                </li>
            </ul>
    </nav>

    <div class='content' id='resume'>

        <h2>ABOUT ME</h2>
            <p></p>
<hr />
        <h2>EXPERIENCE</h2>
            <h4>Gulliver's Travel</h4>
            <ul>
                <li id='jobtitle'>Social Media Intern</li>
                <li id='subhead'>January&ndash;August '12</li>
                <li>// Established and managed company's Facebook and Twitter pages</li>
                <li>// Created graphics for emails and promotions</li>
            </ul>

            <h4>TCU Schieffer School of Journalism</h4>
            <ul>
                <li id='jobtitle'>Website Assistant</li>
                <li id='subhead'>August '09&ndash;December '12</li>
                <li>// Uploaded content onto the school's website through HTML and CSS</li>
                <li>// Managed the site by keeping it free of visual and typographical errors</li>
            </ul>

            <h4>TCU Student Activities</h4>
            <ul>
                <li id='jobtitle'>Graphic Designer</li>
                <li id='subhead'>September '10&ndash;December '12</li>
                <li>// Designed posters for campus-wide events</li>
                <li>// Created invitations and printed materials for special events</li>
            </ul>

            <h4>Peaceable Kingdom Retreat for Children</h4>
            <ul>
                <li id='jobtitle'>Summer Staff</li>
                <li id='subhead'>Summer '10&ndash;'11</li>
                <li>// Facilitated activities for campers including high-ropes courses (zip line and rock climbing) and pool activities</li>
                <li>// Ensured a safe and fun environment for campers by being lifeguard, CPR and high-ropes certified</li>
            </ul>

<hr />  
        <h2>SKILLS</h2>
            <ul id='skills'>
                <li>// Advertising</li>
                <li>// Copywriting/editing</li>
                <li>// Graphic Design</li>
                <li>// Photoshop</li>
                <li>// InDesign</li>
                <li>// Illustrator</li>
                <li>// Web Development</li>
                <li>// HTML</li>
                <li>// CSS</li>
                <li>// jQuery</li>
                <li>// Audio/Video Editing</li>
            </ul>

<hr />
        <h2>EDUCATION</h2>
            <h4>Texas Christian University</h4>
            <ul>
                <li id='subhead'>December '12</li>
                <li>// BS Strategic Communication</li>
                <li>// Music Minor</li>
                <li>// Studies in Italian</li>
            </ul>

    </div>
</div>

<footer>
<p>&copy; 2013 Kyle Simmonds. All rights reserved.</p>
</footer>

<script src='jquery-1.8.3.js'></script>
<script src='jquery-ui-1.9.2.custom.min.js'></script>

</body>
</html>

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;
        }

此外，如果您有关于提出更好问题或更好代码的建议，请告诉我们。谢谢你的帮助。

Answer 1

好的，我有一些建议。您可以在这里查看更新的jsFiddle：

http://jsfiddle.net/tf4cq/1/

基本上，没有任何充分的理由让.content绝对定位。您浮动侧边栏（导航菜单），因此要确保内容在左侧正确排列，只需添加等于或大于侧边栏宽度的left-padding值。

你的页脚没有结束的原因是你应该在{{1或者float（或position: absolute，就此而言）。

基本上，您只需稍微更新CSS文件：

fixed

Answer 2

我（愚蠢地）意识到，当HTML是正确的声明时，DOCTYPE会说html5。 @TiesonT。谢谢你的帮忙。更改DOCTYPE解决了这个问题。

页脚穿过div的中间

HTML

CSS

2 个答案: