html - 用 CSS 完成奇怪的需求(一种模拟框架)

Question

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

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

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

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

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

• 网站应始终填满整个浏览器屏幕。页眉和内容部分应到达页面的右边界，导航和内容部分应到达页面底部。

• 一旦网站缩小——无论是由于调整浏览器窗口的大小还是由于较小的分辨率——每个部分都应该出现一个滚动条，但整个页面不会出现“浏览器滚动条” .页眉应始终保持其高度，导航始终保持其宽度。

您知道实现这一切的方法吗？

你的 伯恩哈德

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

Answer 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

1. 每个部分都有自己的滚动条!
2. 每个部分的宽度和高度都是 100%!
3. 没有浏览器窗口滚动条出现!
4. 每个部分始终保持其比例
5. 处理所有屏幕分辨率