0

我想要实现的是以下所有三个

  1. 将页脚推到页面底部
  2. 还使主 div 始终与子 div 保持全尺寸
  3. 所有子 div 的高度都保持不变

我尝试了很多方法来做到这一点,我找到了一种方法。但是我所做的与 Firefox、Safari 和 IE7 及以下版本不兼容,请帮助我,我正在寻找适用于所有浏览器和纯 CSS 的东西。

非常感谢朋友。

html:

<body>
  <div id="parent">
    <div id="row">
        <div id="childRight">content</div>
        <div id="childLeft"></div>
    </div>
  </div>
  <div id="footer">footer content</div>

CSS:

<style>
            #parent{
                height: auto !important;
                min-height: 100%;
                width: 400px;
                background: grey;
                overflow: auto;
                display: table;
            }
            #footer{
                height: 60px;
                width: 400px;
                background: yellow;
                margin-top: -60px;
            }
            html, body{
                height: 100%;
                margin: 0;
            }
            #childRight, #childLeft{
                display: table-cell;
                width: 100px;
                border: 1px solid black;
                min-height: 100%;
            }
            #childRight{
                background: green;
                height: 100px;
            }
            #childLeft{
                background: red;
                height: 200px;
            }
            #row{
                display: table-row;
                background: blue;
            }
</style>

JSfiddle 示例:http: //jsfiddle.net/yellowandred/UBUNJ/2/

感谢各位朋友的帮助和建议。提前致谢..

在 FF 上使用时的屏幕截图

4

1 回答 1

0

左侧和右侧 div 的更改高度应该相同...例如:200px。并使用固定的底部属性作为页脚。

于 2013-09-04T11:48:11.613 回答