在粘性页脚上，如何使div边界延伸到页尾到页尾？

我尝试了所有粘性页脚CCS示例。他们都工作得很好。但是，我有一个问题。假设我有这样的：在粘性页脚上，如何使div边界延伸到页尾到页尾？

<div id="wrap"> 
    <div id="bodyleft">left</div> 
    <div id="bodyright">right</div> 
    <div id="footer">footer</div> 
</div>

所以，如果我有height 100%为#bodyleft，边框不会扩展到视年底到页脚。它只会涵盖一行内容。

无论是一行还是十行，我都希望边界延伸到页面的末尾。

任何想法？

谢谢！

玛丽亚

编辑：

<body> 
<div id="wrap"> 

<div id="bodyleft">on left</div> 
<div id="bodyright"> 
    some text on right<br /> 
</div> 

</div> 


    <div id="footer">footer </div> 

</body> 
</html> 



* { margin:0px; padding:0px; } 

html, body {height: 100%;} 

#wrap {min-height: 100%;} 

#footer { 
     position: fixed; 
     bottom: 0; 
     background-color: #f00; 
     height: 20px; 
     width: 100%; 
     margin-top:-20px; /* negative value of footer height */ 
} 


#bodyleft{ 
    width:222px; 
    float:left; 
    border:1px solid black; 
    overflow:auto; 
    padding-bottom:20px; 
} 

#bodyright{ 
    width:777px; 
    float:right; 
    border:1px solid black; 
    overflow:auto; 
    padding-bottom:20px; 
}

来源

2010-08-19 MariaKeys

我可能是错的，但我觉得100％会只去高到足以显示div的内容。我想你可能不得不使用最小高度。

来源

2010-08-19 23:17:54

亚伦，谢谢你。我已经使用所有可用的变化，高度，最小高度，高度自动，高度100％..没有任何东西可以扩展div的边框 – MariaKeys 2010-08-19 23:23:57

你试图达到什么样的效果（让左div的底部边框碰到页脚将会非常棘手，因为你不知道用户的屏幕大小，你可以用表格做，但这会毁掉整个标记代码。

你就不能模仿的底部边框？

+----------------------------+------------------------+ 
| LEFT DIV     |  SAME FOR RIGHT |     
|       |      | 
+----------------------------+      | 
| DIV with 1px height  |      | 
| and same width as left div |      | 
| to simulate boder   |      | 
+----------------------------+------------------------+ 
| FOOTER            | 
+-----------------------------------------------------+

来源

2010-08-19 23:25:13 Frankie

哇，你们这么快，请给我5分钟谢谢弗兰基 – MariaKeys 2010-08-19 23:34:09

* {margin：0px ; \t padding：0px; } HTML，身体{高度：100％;} #wrap {最小高度：100％;} #footer的{ \t \t位置是：固定; bottom：0; background-color：＃f00; height：20px; 宽度：100％; \t \t margin-top：-20px;/*页脚高度负值*/ } #bodyleft { \t width：222px; \t float：left; \t边框：1px纯黑色; \t溢出：auto; \t padding-bottom：20px; } #bodyright { \t width：777px; \t float：right; \t边框：1px纯黑色; \t溢出：auto; \t padding-bottom：20px; } – MariaKeys 2010-08-19 23:40:07

我已添加到原始帖子。无法将代码添加到我认为的评论中。我第一次来这里。 – MariaKeys 2010-08-19 23:45:01

在粘性页脚上，如何使div边界延伸到页尾到页尾？

回答

相关问题