Question

我正在研究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;
}

Answer 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>

Answer 2

我假设您在IE中遇到问题？您缺少doctype声明。如果您根据W3Schools上的示例添加过渡文档类型，则应该可以使用。

HTML doctype declaration

Answer 3

基本上css-property＆＃39; float＆＃39; ＃section这一部分是这里的坏人。

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

为什么我的容器/包装器的背景不会延伸到所有内容的后面

3 个答案: