0

我正在为 uni 制作一个作品集，而我的容器/包装器的背景没有垂直延伸到足够的程度，以使其所有内容都具有背景颜色。我将在下面发布代码，任何帮助将不胜感激。

HTML

<body>

    <section id="wrapper">

        <header>
            <hgroup class="title">   
                <h1>Matt Murphy</h1>
                <p>Personal Portfolio | University of Leeds | BA New Media</p>
           </hgroup>
         </header>

           <nav>
                <a href="home.html" class="parent">Home</a>
                <a href="about.html" class="parent">About Matt</a>      
           </nav>   

           <section id="modules">
               <h2>Modules Studies To Date</h2>
                   <section id="year_1">
                       <h3>Year 1</h3>
                         <p>History of Communications</p>
                         <p>Academic Skills and Contemporary Issues</p>
                         <p>Interface Design</p>
                         <p>Design For New Media</p>
                         <p>Basic Camera and Editing</p>
                         <p>Animation For New Media</p>  
                   </section>  

                   <section id="year_2">
                    <h3>Year 2</h3>
                         <p>Dynamic Web Programming</p>
                         <p>Communications Research Methods</p>
                         <p>Working in New Media/p>
                         <p>Media Policy</p>
                         <p>New Media Narrative and Gaming</p>
                         <p>Visual Communications</p> 
                   </section>    
           </section>

    </section>
</body>

CSS

body{
    color:#000;
    background-image: url(images/canvas.png);
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;   
}

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

#wrapper {
    background-color:#FFF;
    padding:3%;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    display:block;
    margin:auto;
    width:60%;
    margin-top:2%;
}

header {
    text-align:right;
}

#modules {
    width:100%;
    display:block;
    margin:auto;
}

#year_1 {
    float:left;
}

#year_2 {
    float:left;
}
4

3 回答 3

1

要解决您的问题，您只需添加overflow: auto到#wrapper.

#wrapper {
    background-color:#FFF;
    padding:3%;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    display:block;
    margin:auto;
    width:60%;
    margin-top:2%;
    overflow: auto; /* add this line */
}

但是，另一个问题是您使用的是 HTML5 元素和 HTML5 shiv，但您没有使用 HTML5 文档类型：

<!DOCTYPE html>
于 2012-04-27T12:01:00.257 回答
0

我假设您在 IE 中遇到问题？您缺少 doctype 声明。如果您按照下面 W3Schools 上的示例添加过渡文档类型，它应该可以工作。

HTML 文档类型声明

于 2012-04-27T11:52:23.717 回答
0

基本上，section#year 上的 css-property 'float' 是这里的坏人。

如果我用 div 替换您的部分并添加一个额外的 div 以清除块渲染它可以工作：http: //jsfiddle.net/hoedinie/537sL/1/

于 2012-04-27T12:04:21.517 回答