- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在努力寻找一种方法来根据我们奇怪的要求对网站进行编码。该站点应在从 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
关于html - 用 CSS 完成奇怪的需求(一种模拟框架),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2764699/
我需要开发一个简单的网站,我通常使用 bootstrap CSS 框架,但是我想使用 Gumbyn,它允许我使用 16 列而不是 12 列。 我想知道是否: 我可以轻松地改变绿色吗? 如何使用固定布局
这个问题在这里已经有了答案: 关闭 13 年前。 与直接编写 PHP 代码相比,使用 PHP 框架有哪些优点/缺点?
我开发了一个 Spring/JPA 应用程序:服务、存储库和域层即将完成。 唯一缺少的层是网络层。我正在考虑将 Playframework 2.0 用于 Web 层,但我不确定是否可以在我的 Play
我现有的 struts Web 应用程序具有单点登录功能。然后我将使用 spring 框架创建一个不同的 Web 应用程序。然后想要使用从 struts 应用程序登录的用户来链接新的 spring 应
我首先使用Spark框架和ORMLite处理网页上表单提交的数据,在提交中文字符时看到了unicode问题。我首先想到问题可能是由于ORMLite,因为我的MySQL数据库的字符集已设置为使用utf8
我有一个使用 .Net 4.5 功能的模块,我们的应用程序也适用于 XP 用户。所以我正在考虑将这个 .net 4.5 依赖模块移动到单独的项目中。我怎样才能有一个解决方案,其中有两个项目针对不同的版
我知道这是一个非常笼统的问题,但我想我并不是真的在寻找明确的答案。作为 PHP 框架的新手,我很难理解它。 Javascript 框架,尤其是带有 UI 扩展的框架,似乎通过将 JS 代码与设计分开来
我需要收集一些关于现有 ORM 解决方案的信息。 请随意编写任何编程语言。 你能谈谈你用过的最好的 ORM 框架吗?为什么它比其他的更好? 最佳答案 我使用了 NHibernate 和 Entity
除了 Apple 的 SDK 之外,还有什么强大的 iPhone 框架可供开始开发?有没有可以加快开发时间的方法? 最佳答案 此类框架最大的是Three20 。 Facebook 和许多其他公司都使用
有人可以启发我使用 NodeJS 的 Web 框架吗?我最近开始从免费代码营学习express js,虽然一切进展顺利,但我对express到底是什么感到困惑。是全栈框架吗?纯粹是为了后端吗?我发现您
您可以推荐哪种 Ajax 框架/工具包来构建使用 struts 的 Web 应用程序的 GUI? 最佳答案 我会说你的 AJAX/javascript 库选择应该较少取决于你的后端是如何实现的,而更多
我有生成以下错误的 python 代码: objc[36554]: Class TKApplication is implemented in both /Library/Frameworks/Tk.
首先,很抱歉,如果我问的问题很明显,因为我没有编程背景,那我去吧: 我想运行一系列测试场景并在背景部分声明了几个变量(我打印它们以仔细检查它们是否已正确声明),第一个是整数,另外两个字符串为你可以看到
在我们承担的一个项目中,我们正在寻找一个视频捕获和录制库。我们的基础工作(基于 google 搜索)表明 vlc (libvlc)、ffmpeg (libavcodec) 和 gstreamer 是三
我试过没有运气的情况下寻找某种功能来杀死/中断Play中的正常工作!框架。 我想念什么吗?还是玩了!实际没有添加此功能? 最佳答案 Java stop类中没有像Thread方法那样的东西,由于种种原因
我们希望在我们的系统中保留所有重大事件的记录。例如,在数据库可能存储当前用户状态的地方,事件日志应记录对该状态的所有更改以及更改发生的时间。 事件记录工具应该尽可能接近于事件引发器的零开销,应该容纳结
那里有 ActionScript 2.0/3.0 的测试框架列表吗? 最佳答案 2010-05-18 更新 由于这篇文章有点旧,而且我刚刚收到了赞成票,因此可能值得提供一些更新的信息,这样人们就不会追
我有一个巨大的 numpy 数组列表(一维),它们是不同事件的时间序列。每个点都有一个标签,我想根据其标签对 numpy 数组进行窗口化。我的标签是 0、1 和 2。每个窗口都有一个固定的大小 M。
我是 Play 的新手!并编写了我的第一个应用程序。这个应用程序有一组它依赖的 URL,从 XML 响应中提取数据并返回有效的 URL。 此应用程序需要在不同的环境(Dev、Staging 和 Pro
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 4年前关闭。 Improve thi
我是一名优秀的程序员,十分优秀!