Question

Hello stackies，

我正在开发一个网站，我有一个小问题。这并不重要，该网站可以正常工作，但这只是一件令人讨厌的事情，你不断地一遍又一遍地摸不着头脑。

我要做的是将静态高度与动态高度混合。

示例：

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窗口内部（因为它的高度是动态的，它只会调整因为它很酷。）< / p>

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

我希望main_content保留在viewscreen内，并自动适应浏览器窗口的高度。

我该怎么做？

当你的显示器只有768像素的高度和大约10像素落在可滚动区域之外时，这很令人烦恼......最糟糕的是，我似乎无法让它自己表现出来。我试过把事情做成绝对的，它们只是相互重叠，现在停止了，因为它们都是绝对的，超出正常流量。我试过试验最高和最低高度百分比的标题和唯一的容器...没有用。搜索javascript以自动摆弄我的css'身高或最大身高百分比，但效果不理想......

基本上我现在已经花了两天的时间来保持这一点而且我没有足够的创造力来提出一些解决方案。

这有一个纯粹的CSS解决方案吗？

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

Answer 1

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

如果我有时间，我会在此处将脚本发布为编辑。

CSS混合静态和动态高度

1 个答案: