用 CSS 满足奇怪的需求（一种模拟框架）答案

【问题标题】：Fulfilling strange requirements with CSS (kind of simulating frames)用 CSS 满足奇怪的需求（一种模拟框架）
【发布时间】：2010-05-19 05:28:33
【问题描述】：

我正在努力寻找一种根据我们奇怪的要求对网站进行编码的方法。该站点应在从 IE6 到 Opera 的所有浏览器中正确显示。

该网站由三个部分组成。它包含顶部的标题，左侧的导航，屏幕的其余部分应填充内容部分。下面的图片应该可以帮助您更好地理解我的描述。

layout of the website http://www.4freeimagehost.com/uploads/820aee2ded8b.png

问题来了：三个部分中的每一个都应该可以单独滚动，并且不应该出现浏览器滚动条。该页面的显示方式应该与使用框架类似。当然，在足够大的屏幕上，应该不会出现滚动条。

使用哪种方式来显示网站并不重要，尽管框架不是一个选项，而 div 是首选。有两个条件：

站点应始终填满整个浏览器屏幕。标题和内容部分应该到达页面的右边框，导航和内容应该到达底部。
只要网站缩小——无论是由于调整浏览器窗口大小还是由于较小的分辨率——应该会出现每个部分的滚动条，但不会出现整个页面的“浏览器滚动条” .标题应始终保持其高度，而导航始终保持其宽度。

你知道如何实现这一切吗？

你的伯恩哈德

编辑 1：哦，我忘了：该网站应该可以在 1024x768 中查看。编辑2：另一件事：标题有一个固定的高度，导航有一个固定的宽度。导航的高度以及内容的高度和宽度应该填满整个屏幕。

【问题讨论】：

告诉您的客户，人们不会建造这样的东西。这是不专业的。
使用框架。虽然它们确实有缺点，但它们快速、简单并且可以在 IE6 中运行。
这个网站可能会帮助你找到正确的方向，但你肯定需要稍微处理一下 CSS 溢出问题：matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
我知道这不是最好的要求，我不允许使用框架。有关详细信息，请参阅下面的答案。
@David Dorward：请停止编码！

标签： html css layout scroll

【解决方案1】：

更新：

我找到了这篇文章

http://www.alistapart.com/articles/conflictingabsolutepositions/

我认为您正在寻找的只是 CSS 和 HTML！

最终演示：http://jsbin.com/icemo3/24

针对您的上一条评论，我已经制定了这个还需要一点 jquery (javascript) 的解决方案，请查看演示并使用演示代码！

$(window).load(function() {
getWindowProportion()
});

$(window).resize(function() {
getWindowProportion()
});

function getWindowProportion() {
 $('#wrapper').attr('style', 'width:' + $(window).width() + 'px');
    $('#header').attr('style', 'height:200px;width:' + $(window).width() + 'px');
    $('#navigation').attr('style', 'height:' + ($(window).height() - 200) + 'px;top:200px;width:300px');
    $('#content').attr('style', 'width:' + ($(window).width() - 300) + 'px;top:200px;height:' + ($(window).height() - 200) + 'px;left:' + ($('#navigation').width()) + 'px');
};

CSS演示2：http://jsbin.com/icemo3/2

CSS演示3：http://jsbin.com/icemo3/3

* { margin:0; padding:0 }
html, body { margin:0; padding:0;  position:relative; overflow:auto; width:100%;  height:100%; }
#content { float:left; width:  80%; background: cyan; height:80%;  top:20%; left:20% }
#navigation { float:left; width:  20%; background: green; height:80%;  top:20% }
#header {  width:  100%; background: red; height:20%; }
.scrollme { margin:0; padding:0; overflow: auto;  position:absolute; }
p { margin:10px }

<div id="header" class="scrollme"><p>some text here</p></div>
<div id="navigation" class="scrollme"><p>some text here</p></div>
<div id="content" class="scrollme"><p>some text here</p></div>

注意：

tested on: 
IE6+
Chrome
Firefox
Opera

每个部分都有自己的滚动条！
每个部分都有 100% 的宽度和高度！
没有出现浏览器窗口滚动条！
每个部分始终保持其比例
适用于所有屏幕分辨率

【讨论】：

这不满足“总是填满整个浏览器屏幕”或“到底部”或“整个页面没有'浏览器滚动条'”的要求
quote: "网站应该总是填满整个浏览器屏幕"
我已经尝试过了，但我遇到了与我在新答案中所写相同的问题。页面在浏览器窗口上方展开。或者也许我做错了什么......
感谢您的努力，aSeptik。我的标题部分有一个固定的像素高度，我的导航是固定的。一旦我将这些设置应用于您的示例，更改部分的位置以使没有空白空间，然后将内容部分的高度更改为 100%，页面再次拉伸直到浏览器屏幕之外。请参阅我对问题的第二次编辑。
感谢您的帮助，aSeptik，但可能需要一点时间，直到我可以测试您的新版本。写完我会写信给你的。

【解决方案2】：

好问题。对于这一点，您必须找到 x 和 y 的浏览器屏幕分辨率大小（可能使用 javascript）。使用这个大小，在 div 部分分配宽度和高度。

在div中，可以这样使用

<div id="nameID" style="position: relative; overflow-y: auto; overflow-x: auto;"></div>

试试这个方法。我想你可以得到一个正确的解决方案。

【讨论】：

【解决方案3】：

框架仍然存在是有原因的。有时间和地点。大概就是这样。

但无论如何，这里有一种使用 CSS 而不是框架的方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Not Frames</title>
        <style type="text/css" media="screen">
            .fake-content {
                margin: 20px;
                background-color: #000;
                height: 1500px;
                width: 1500px;
            }

            /* Get rid of the original scrollbars */
            html, body
            {
                margin: 0;
                padding: 0;

                width: 100%;
                height: 100%;

                overflow: hidden;
            }

            /* The frames */
            .frame
            {
                position: absolute;
                overflow: scroll;
            }

            /* The sections */
            #header
            {
                top: 0;
                height: 250px;
                width: 100%;

                background-color: #F00;
            }

            #sidebar
            {
                top: 250px;
                bottom: 0;
                left: 0;
                width: 250px;

                background-color: #0F0;
            }

            #content
            {
                top: 250px;
                bottom: 0;
                left: 250px;
                right: 0;

                background-color: #00F;
            }
        </style>
    </head>
    <body>
        <div id="header" class="frame">
            <div class="fake-content">Content</div>
        </div>
        <div id="sidebar" class="frame">
            <div class="fake-content">Content</div>
        </div>
        <div id="content" class="frame">
            <div class="fake-content">Content</div>
        </div>
    </body>
</html>

【讨论】：

IE6 不支持使用绝对定位设置对边（例如top: 250px; bottom: 0），所以这不起作用。
IE6 的一种解决方法包括将边缘的位置设置为正常，然后通过 IE 的专有 css 表达式之一分配动态宽度。查看本文底部以获得完整解释：alistapart.com/articles/conflictingabsolutepositions
好的，我想我有另一种方法可以使用 IE6。很快就会出现......编辑：或者不是。现在想多了就不会了。哦！

【解决方案4】：

所以，我现在找到了一种无需标题即可完成这项工作的方法。

导航部分使用以下 CSS：

float: left;
height: 100%
overflow: auto;
width:185px;

内容部分使用这个：

height: 400px;
overflow: auto;

还有

html, body{
    height: 100%
}

唯一的问题是，当我插入标题时，网站会一直延伸到浏览器窗口之外。这是由于使用了height: 100%。你知道我怎样才能使页面仍然适合浏览器屏幕吗？

编辑 1：下面的 JavaScript 可以解决问题，至少在 Firefox 中是这样：

window.onresize = resize;

function resize(){
    heightWithoutHeader = (window.innerHeight - 85) + "px"; 
    document.getElementById("content").style.height = heightWithoutHeader;
    document.getElementById("navigation").style.height = heightWithoutHeader;
}

但也许有更优雅的 CSS 解决方案...

【讨论】：