1

在过去的两天里，我一直在为我的投资组合网站解决这个问题，但还没有找到解决方案。

页面的基本结构是页眉、内容包装器（导航栏和内容 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;
        }

此外，如果您有建议让这个问题成为一个更好的问题或更好的代码，请告诉我。感谢您的任何帮助。

4

2 回答 2

2

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

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

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

您的页脚没有出现在您认为应该的位置的原因是，只要您应用floator position: absolute(or fixed，为此，它上面的两个元素（导航栏和内容）都会从正常文档流中取出事情）。

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

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;
    }
于 2013-01-19T22:52:38.690 回答
1

我（愚蠢地）意识到 DOCTYPE 说的是 html5，而 html 是正确的声明。@TiesonT。感谢您的帮助。更改 DOCTYPE 解决了这个问题。

于 2013-01-20T23:36:28.217 回答