0

我已经为此苦苦挣扎了一段时间，似乎找不到任何解决方案。我有一个框架、一个顶盒、一个左盒和一个右盒以及一个包含最后两个的中间盒。

我希望这些是框架的高度减去机顶盒的高度。这将导致框架被填充，仅此而已，什么也没有。

我当前的代码有什么问题，什么是实现这一目标的正确方法？

这是代码：

<html>
    <head>
        <style type="text/css">
            #frame {
                width: 800px;
                min-height: 500px;
                border: 1px solid black;
            }

            #top {
                width: 800px;
                height: 80px;
                float: left;
                background-color: #666;
            }

            #middle {
                width: 800px;
                height: 100%;
                float: left;
            }

            #left {
                width: 200px;
                height: 100%;
                float: left;
                background-color: #B3B4BD;
            }

            #right {
                width: 600px;
                height: 100%;
                float: left;
                background-color: #99BC99;
            }
        </style>
    </head>
    <body>
        <div id="frame">
            <div id="top">Top</div>

            <div id="middle">
                <div id="left">Left</div>
                <div id="right">Right</div>
            </div>
        </div>
    </body>
</html>
4

2 回答 2

2

除非您明确设置父级的高度，否则您不能指定 100% 的高度。原因是父级通常会扩展高度以适应其子级，您需要指定一个准确的高度，以便父级及时知道它的高度是多少，以便其子级需要它。

也就是说，有很多方法可以达到类似的效果。例如，如果一个 div 通常比另一个高，那么您可以使用绝对定位将第二个 div 拉伸到相同的高度。或者，如果你真的很绝望，那么你可以使用一张桌子。

于 2013-01-09T21:01:05.170 回答
0

尝试使用比例而不是精确像素。

        #frame {
         width: 80%;
         min-height: 500px;
         border: 1px solid black;
         margin-right:auto;
         margin-left:auto;

        }

        #top {
            width: 100%;
            height: 80px;
            float: left;
            background-color: #666;
        }

        #middle {
            width: 100%;
            height: 100%;
            float: left;
        }

        #left {
            width: 33%;
            height: 100%;
            float: left;
            background-color: #B3B4BD;
        }

        #right {
            width: 66%;
            height: 100%;
            float: left;
            background-color: #99BC99;
        }

jsFiddle

这是带有更新的 CSS 的演示的屏幕截图： 带有更新 CSS 的演示屏幕截图

于 2013-01-09T20:55:52.993 回答