Html 有文字的时候我的背景不会重复，为什么？

^您可以在那里查看完整的源代码

为什么图像不会像我编码的那样重复-y

CSS

HTML

123
12
312
3123
123
123
123
123
123
123
123

尝试将“.”改为“#”，将“类”改为“id”。并在页面中左前右

#main { background: transparent url("../images/content/bg.gif") repeat-y;
        width: 960px; 
        font-family: Tahoma;
        color: #0c8cbd;
        text-decoration: none;
        word-spacing: normal;
        text-align: justify;
        letter-spacing: 0;
        line-height: 1.2em;
        font-size: 11px; }

    #content { padding: 20px; height:100%; }      
         #leftside { width: 600px; float: left; }
         #rightside { width: 300px; float: right; }

    <div id="main">
       <div id="content">
          <div id="rightside">
             123
             123
             123
             123
             123
          </div>
<div id="leftside">
             123
             12
             312
             3123
             123
             123
          </div>
       </div>
    </div>

#main{背景：透明url（“../images/content/bg.gif”）重复-y；
宽度：960px；
字体系列：Tahoma；
颜色：#0c8cbd；
文字装饰：无；
字距：正常；
文本对齐：对齐；
字母间距：0；
线高：1.2米；
字体大小：11px；}
#内容{填充：20px；高度：100%；}
#左侧{width:600px；float:left；}
#右侧{width:300px；float:right；}
123
123
123
123
123
123
12
312
3123
123
123

尝试将“.”改为“#”，将“类”改为“id”。并在页面中左前右

#main { background: transparent url("../images/content/bg.gif") repeat-y;
        width: 960px; 
        font-family: Tahoma;
        color: #0c8cbd;
        text-decoration: none;
        word-spacing: normal;
        text-align: justify;
        letter-spacing: 0;
        line-height: 1.2em;
        font-size: 11px; }

    #content { padding: 20px; height:100%; }      
         #leftside { width: 600px; float: left; }
         #rightside { width: 300px; float: right; }

    <div id="main">
       <div id="content">
          <div id="rightside">
             123
             123
             123
             123
             123
          </div>
<div id="leftside">
             123
             12
             312
             3123
             123
             123
          </div>
       </div>
    </div>

#main{背景：透明url（“../images/content/bg.gif”）重复-y；
宽度：960px；
字体系列：Tahoma；
颜色：#0c8cbd；
文字装饰：无；
字距：正常；
文本对齐：对齐；
字母间距：0；
线高：1.2米；
字体大小：11px；}
#内容{填充：20px；高度：100%；}
#左侧{width:600px；float:left；}
#右侧{width:300px；float:right；}
123
123
123
123
123
123
12
312
3123
123
123

信不信由你，你的背景在重复。但是，您的

只有40像素高。这是单击Firebug中的元素时的外观：

请注意高亮显示的区域有多小。右下角DOM窗口中的

clientHeight

显示为“40”

---

问题是，默认情况下，如果内容只是浮动的，大多数容器不会扩展到其内容的大小。我已经吃过了。添加

溢出：自动

到

.main

的样式块，它应该可以工作。如果没有，请在

的结束标记后添加一个

，信不信由你，你的背景正在重复。但是，您的

只有40像素高。这是单击Firebug中的元素时的外观：

请注意高亮显示的区域有多小。右下角DOM窗口中的

clientHeight

显示为“40”

---

问题是，默认情况下，如果内容只是浮动的，大多数容器不会扩展到其内容的大小。我已经吃过了。添加

溢出：自动

到

.main

的样式块，它应该可以工作。如果没有，请在

的结束标记后添加

，

在
左侧
和
右侧
div

后添加

将解决此问题。这些

div

是浮动的，是

内容的唯一内容，导致其计算高度为零。
内容的垂直填充为
40px
总计，使
main
具有
40px
高度-而您的背景实际上是重复在那些
40px
上，在
左侧
和
右侧
div
之后添加一个
将解决问题。这些
div
是浮动的，是
内容的唯一内容，导致其计算高度为零。
content
的垂直填充是
40px
total，使得
main
具有
40px
高度-而你的背景实际上在那些
40px
上重复，你知道这绝对没有区别，对吗？这并不能神奇地解决问题。你知道这绝对没有什么区别，对吗？这并不能神奇地解决问题。哈哈，你是个好绅士。它工作得很好。非常感谢你@烧酒-不，谢谢。我已经有足够的工作让我忙了好几年了。哈哈，你是一个很好的绅士。它工作得很好。非常感谢你@烧酒-不，谢谢。我已经有足够的工作让我忙上好几年了。
#main { background: transparent url("../images/content/bg.gif") repeat-y;
        width: 960px; 
        font-family: Tahoma;
        color: #0c8cbd;
        text-decoration: none;
        word-spacing: normal;
        text-align: justify;
        letter-spacing: 0;
        line-height: 1.2em;
        font-size: 11px; }

    #content { padding: 20px; height:100%; }      
         #leftside { width: 600px; float: left; }
         #rightside { width: 300px; float: right; }

    <div id="main">
       <div id="content">
          <div id="rightside">
             123
             123
             123
             123
             123
          </div>
<div id="leftside">
             123
             12
             312
             3123
             123
             123
          </div>
       </div>
    </div>