Question

我尝试了所有粘性页脚CCS示例。所有这些都很好。但是，我有一个问题。假设我有这个：

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

因此，如果我height 100% #bodyleft，则边框不会延伸到视口的末尾直到页脚。它只会涵盖一行内容。

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

有什么想法吗？

谢谢！

玛利亚

编辑：

<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;
}

Answer 1

我可能错了，但我认为100％只会高到足以显示div的内容。我想你可能不得不使用min-height。

Answer 2

你想要实现的目标（左边div的底部边框击中页脚将会非常棘手，因为你不知道用户的屏幕尺寸。你可以用表来做，但这会毁了整个标记代码。

你能不能模拟下边框？

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

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

2 个答案: