Question

过去几周，我一直试图获得动态结果：

我有一个包含其他<div class="left-panel">的{{1}}，我希望老板div（<div>）具有灵活性。我希望它根据访客屏幕的高度调整它的大小，并重新调整其他div的位置。

实际上，我在它的类中将它的高度设置为left-panel，具有隐藏的溢出和380px的宽度。

以下是我想要获得的例子：http://i.stack.imgur.com/7p5Gi.gif

我尝试使用表格，但是我不喜欢用它们设置整个网站，因为他们不喜欢CSS，现在他们已经老了。

我希望有人可以帮助我。其实我想要一个非常简单的事情。

编辑：我的html和body类的高度设置为100％。

Answer 1

在这种情况下，您需要使用％，身体可以使用分辨率的高度自动更改高度。

<强>的CSS：

.panel{ height:100%; width:380px;}

.logo-container { height: 25%; width:100%; } 
.body-container { height: 50%; width:100%; } 
.footer-container { height: 25%; width:100%; }

你的页眉和页脚是相同的高度..身体的高度更高。所以你可以使用25％的页眉和页脚，50％的身体。 （或其他％，就像你想要的那样。如果你想要身体更大，例如20％60％20％）

如果你想让你的div自动高度，你需要使用％。

Answer 2

<强>是的。

我确认对我来说，媒体查询“几乎”就可以了。

实际上，对于所有常见的分辨率（从1680x1050到800x600），我在媒体查询规则中为面板设置了正确的大小％，所以只要客户端屏幕为1152x864，就会启动以下规则： / p>

@media all and (max-height: 739px)
{
.panel
{
    height: 93.9%;
    width: 380px;
    background-color: rgba(255,255,255,0.50);
}
}

（仅适用于窗口的高度尺寸）

我说“几乎”因为客户端有时必须滚动页面，特别是当他手动调整窗口大小时。

我可以使用overflow: hidden;，但技术上<div> s会出现相同的大小问题： - ）。

无论如何，这不太明显，我稍后会尝试其他事情。

感谢响应者！

带div和其他div的自动高度

2 个答案: