CSS混合静态和动态高度答案

【问题标题】：CSS mixing static and dynamic heightCSS混合静态和动态高度
【发布时间】：2011-12-21 16:28:09
【问题描述】：

大家好，

我正在开发一个网站，但我遇到了一个小“问题”。这并不重要，该网站可以正常工作，但这只是您一遍又一遍地挠头的那些烦人的事情之一。

我想做的是混合静态高度和动态高度。

例子：

HTML：

< HTML >
< BODY >
< DIV class="header_with_menu" >
< /DIV >
< DIV class="main_content" >
< /BODY >
< /HTML >

CSS：

body{ margin: 0; padding 0;
width: 100%; height: 100%; }

.header_with_menu {display: block; margin-left: 100%; margin-right: 100%; height: 160px; }
.main_content {display: block; margin-left: 100%; margin-right: 100%; height: 80% }

如您所见，没什么特别的。我在 main_content 上使用自定义滚动条 javascript。在我开始使用 firefox（或任何其他浏览器）的窗口高度之前，它工作正常。

我的期望：当我让firefox的窗口越来越小时，main_container会越来越小，但是，保持在firefox窗口内（因为它的高度是动态的，它会简单地调整，因为它很酷。）

会发生什么：main_container 的高度最终会卡在某个我没有指定的高度，并且内容将开始消失在浏览器窗口底部的视图之外。

我希望 main_content 留在视图屏幕内并自动适应浏览器窗口的高度。

我该怎么做？？

当你有一个只有 768 px 高度的小显示器并且大约 10px 落在可滚动区域之外时，这很烦人......最糟糕的是，我似乎无法让它自己运行。我试过让事情变得绝对，它们只是相互重叠，现在停止这种情况，因为它们既是绝对的，又不在正常流程之外。我已经尝试尝试以百分比表示标题和唯一容器的最大和最小高度......没有用。搜索 javascript 来自动调整我的 css 的高度或最大高度百分比，结果不太好......

基本上我这两天一直在考虑这个问题，只是我没有足够的创造力来想出一些解决方案。

有没有纯 CSS 解决方案？

（PS 我现在为 main_content 使用 77% 的高度，因为这似乎是完美的边框：对于 1920x1080 来说不算太小，也不会太大，因此内容将开始消失 @ 1440x900。78% 将使内容开始消失低于 75% 只会让它在 1920x1080 下看起来很丑。）

【问题讨论】：

你能做一个jsfiddle吗？通过一些视觉帮助会更容易理解;)
Main_content 不应该离开视屏，而是适应浏览器的高度。我不知道 jsfiddle 是什么，用谷歌搜索但后来离开了 ^_^'..
如果我可以在 stackoverflow 上私信你，我会发给你一个链接..
这里：jsfiddle.net 如果您将 css 和 html 放在正确的窗口中并按运行，您可以看到您的网站“实时”。我会为你做，但你应该先试一试。
让其他人（我们）看到问题

标签： css dynamic static height

【解决方案1】：

很抱歉回答我自己的问题，但答案是：使用带有脚本的流布局，该脚本使用由当前窗口宽度和高度计算的百分比来计算屏幕底部的空间，以计算内容和/或页脚 div 的高度。

如果我有时间，我会将脚本发布在这里作为编辑。

【讨论】：