背景无法正确定位

Question

嗨，大家好我是新来的html和css 我想创建4个背景，一个在顶部，一个在底部，一个在右边......但不知何故， t出现，其他工作正常 你能帮助我吗？

HTML：

<div class="header"> 
    </div> 

    <div class="leftheader"> 
    </div> 

    <div class="rightheader"> 
    </div> 

    <div class="bottomheader"> 
    </div> 

CSS

body { 
    background-color: #efefef; 
    margin: 0px auto; 
    font-family: arial 

} 


.header{ 
    background: #cccccc; 
    background-position: top; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    border: 0px solid #000000; 
    width: auto; 
    height: 60px; 
} 

.leftheader { 
    background: #cccccc; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: left; 
    border: 0px solid #000000; 
    width: 100; 
    height: 590; 
} 

.rightheader { 
    background: #cccccc; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: right 10px top 10px; 
    border: 1px solid #000000; 
    width: 100; 
    height: 590; 
} 

.bottomheader { 
    background: #cccccc; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: bottom; 
    border: 0px solid #000000; 
    width: auto; 
    height: 60px; 
} 

Answer 1

来得到这个工作的关键是使用你的.leftheader和.rightheader元素float: left和float: right。然后，您需要将clear: both放在.bottomheader上，以清除浮标。

body { 
 
    background-color: #efefef; 
 
    margin: 0px auto; 
 
    font-family: arial 
 
} 
 
.header { 
 
    background: #cccccc; 
 
    background-position: top; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    border: 0px solid #000000; 
 
    width: auto; 
 
    height: 60px; 
 
} 
 
.leftheader { 
 
    background: #cccccc; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: left; 
 
    border: 0px solid #000000; 
 
    width: 100px; 
 
    height: 590px; 
 
    float: left; 
 
} 
 
.rightheader { 
 
    background: #cccccc; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: right 10px top 10px; 
 
    border: 1px solid #000000; 
 
    width: 100px; 
 
    height: 590px; 
 
    float: right; 
 
} 
 
.bottomheader { 
 
    background: #cccccc; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: bottom; 
 
    border: 0px solid #000000; 
 
    width: auto; 
 
    height: 60px; 
 
    clear: both; 
 
}

<div class="header">header</div> 
 
<div class="leftheader">leftheader</div> 
 
<div class="rightheader">rightheader</div> 
 
<div class="bottomheader">bottomheader</div>