Question

我一直在努力解决这个问题，我似乎无法找到任何解决方案。我有一个框架，一个顶部框，一个左框和一个右框和一个中间框包含最后两个。

我希望这些是框架的高度减去顶部框的高度。这将导致框架被填满，没有更多，也没有留下任何东西。

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

以下是代码：

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

Answer 1

除非明确设置父级的高度，否则无法指定100％的高度。原因是父母通常在高度上扩展以适应其子女，并且您需要指定一个确切的高度，以便父母知道它的孩子需要它的高度。

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

Answer 2

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

        #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演示的屏幕截图： Screenshot of your demo with updated CSS

为什么我的DIV孩子与父母的身高不同

2 个答案: