gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 19:22:29 25 4
gpt4 key购买 nike

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

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

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

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

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

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

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

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

你的伯恩哈德

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

最佳答案

更新:

我找到了这篇文章

我认为您正在寻找的只是 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. 处理所有屏幕分辨率

关于html - 用 CSS 完成奇怪的需求(一种模拟框架),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2764699/

25 4 0
文章推荐: javascript - 动态
文章推荐: c# - 模拟和单例
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com