0

在过去的几周里，我一直在尝试获得动态结果：

我有一个<div class="left-panel">包含其他<div>s 的，我希望老板 div ( left-panel) 灵活。我希望它根据访问者屏幕的高度调整它的大小并重新调整其他 div 的位置。

实际上，我将它的高度设置为height: 100%;在其类中，具有隐藏的溢出和 380 像素的宽度。

这是我想要获得的示例图像：http: //i.stack.imgur.com/7p5Gi.gif

我尝试使用表格，它有效，但我不喜欢用它们设置整个网站，因为它们不太喜欢 CSS，而且它们现在已经过时了。

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

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

4

2 回答 2

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 自动高度，你需要使用 % ..

于 2013-09-26T12:34:59.793 回答
0

是的。

我确认对我来说，媒体查询“几乎”起到了作用。

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

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

（仅适用于窗口的高度大小）

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

我可以使用overflow: hidden;，但从技术上讲，<div>s 会有相同的大小问题:-)。

无论如何，这不是太明显，我稍后会尝试其他的东西。

不过感谢响应者！

于 2013-09-28T16:58:40.843 回答