我想在我的网站上找到类似StumbleUpon的内容来查看外部文章。这里有一个侧栏用于评论，等等。jsfiddle为此。
我做了什么
HTML
<div id="header">Head</div>
<div id="sidebar">Sidebar</div>
<iframe id="article" src="http://cnn.com"></iframe>
CSS
html,body{width:100%;height:100%;overflow:hidden;}
#header{width:100%;height:49px;border-bottom:1px solid #000;}
#sidebar{height:100%;width:249px;border-right:1px solid #000;float:left;}
#article{border:0;overflow:visible;float:right;}
JS
$('#article').height($('html').height()-50).width($('html').width()-$('#sidebar').outerWidth()-1);
我找到了很多方法来实现这种布局，包括浮点数，位置：绝对，填充，表格（绝对不是）等。在兼容性和速度方面实现这一点的最佳方法是什么？
答案 0 :(得分：1)
HTML5，适用于IE7及以上版本（感谢html5shiv）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body,html{
padding: 0;
margin: 0;
}
header{
height: 49px;
border-bottom: 1px solid black;
background-color: #fdd;
}
nav {
position: absolute;
width: 249px;
top: 50px;
bottom: 0;
left: 0;
background-color: #dfd;
border-right: 1px solid black;
overflow: hidden;
}
body > section {
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 250px;
overflow: auto;
background-color: #ddf;
}
</style>
</head>
<body>
<header>
Header
</header>
<nav>
Sidebar
</nav>
<section>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</section>
</body>
</html>
答案 1 :(得分：0)
<style>
#side_bar {
width:200px;
float:left;
} #body_con {
overflow:hidden; /*expands to fit in sidebar*/
} #main_content {
margin-left:200px;
}
</style>
<div id="header"></div>
<div id="body_con">
<div id="side_bar"></div>
<div id="main_content"></div>
</div>
这很简单。
答案 2 :(得分：0)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body,html{
padding: 0;
margin: 0;
height: 100%;
cursor: default;
overflow: hidden;
}
#divContainer{
position: relative;
height: 100%;
}
#divHead{
position: relative;
height: 100px;
border-bottom: 1px solid #ccc;
background-color: #eee;
}
#divMain{
}
#divSidebar{
position: absolute;
background-color: #eee;
border-right: 1px solid #ccc;
width: 250px;
left: 0;
top: 101px;
bottom: 0;
overflow: hidden;
}
#divContent{
position: absolute;
left: 251px;
top: 101px;
bottom: 0;
right: 0;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id='divContainer'>
<div id='divHead'>
Header
</div>
<div id='divMain'>
<div id='divSidebar' >
Sidebar
</div>
<div id='divContent' >
Content
</div>
</div>
</div>
</body>
</html>
答案 3 :(得分：0)
回应你的评论：“我主要是寻找（按重要性近似的顺序）兼容性，可用性，速度和清洁代码。”
兼容性：这似乎是您的主要关注点。你的另一个评论是：“浮点数缓慢，CPU速度慢，位置：绝对在触摸屏设备中效果不佳，填充在IE中表现不同。”正如tybro0103在他的评论中指出的那样，使用IE填充不应该是正确doctype的问题。关于float渲染的速度，请参阅下面的“速度”。您对position: absolute的关注似乎是有效的，可能最好避免 - 但除此之外，任何其他方法都不可能有任何真正的兼容性问题。
可用性：我不确定你的意思，因为你已经用“这个特殊的布局”限制了布局，可用性实际上是一个布局问题（不是背后的结构）布局）。
速度：我认为速度会受到header，sidebar中的内容的影响更大article（特别是如果文章是非现场链接），而不是用于创建基本布局的结构和最小css。即使在缓慢的CPU上浮动渲染稍微慢一点（我之前从未听过这个问题，但是在慢速CPU上没有所有渲染速度慢吗？），大图像，大量的javascript等等都在进行中减慢页面显示的速度远远低于css float声明。
清洁代码：你原来的小提琴很干净。带有四个最小位css的三个html项目就像你能得到的一样紧凑。
答案 4 :(得分：0)
我在触控设备上遇到与position:absolute的兼容性问题，您确定不会将其与fixed混淆吗？此外，padding在所有浏览器中都能很好地工作，除非你在怪癖模式下设置IE，并且你绝对不希望这样做有很多原因。
我会在你的布局中使用position：absolute，这是有道理的，因为你在没有自然的滚动流动的情况下挤压身体内的所有东西。
绝对定位也有很大的优势;你可以f.ex做left:250px;right:0，它会扩展可用区域，左边距为250px。我认为这是在容器内编程流体布局的一种更合理的方式，而不是使用浮动来破坏负边距。
另一个重要方面：使用绝对定位，您还可以在内容顺序中将文章DIV移动到侧边栏上方。这是许多人忘记的事情，在大多数情况下，屏幕阅读器和搜索引擎尽可能快地获取内容更有意义。
它的缺点是IE6及以下版本不玩球，但this article中解释了简单的解决方法（正如您将看到的那样）。
使用浮动仍然是一种选择，但正如我所提到的，它可能会引起更多头痛，因为它们被设计为自然布局流程的一部分。
我还会将iframe放在#article div中，将它与布局网格分开会更有意义。
像this
这样的东西<div id="header">Head</div>
<div id="article">
<iframe src="http://cnn.com"></iframe>
</div>
<div id="sidebar">Sidebar</div>
CSS：
html,body {
width:100%;
overflow:hidden;
}
#header {
position:absolute;
left:0;
right:0;
height:49px;
border-bottom:1px solid #000;
}
#sidebar {
position:absolute;
top:50px;
bottom:0;
width:249px;
border-right:1px solid #000;
}
#article {
position:absolute;
top:50px;
left:250px;
right:0;
bottom:0;
}
#article iframe {
border:none;
width:100%;
height:100%;
}
最后IE5＆amp; amp; IE6（如果你想走那么远）：
<!--[if lt IE 7]>
<style>
body, #header { width:100% }
#sidebar, #article{ height: expression(document.body.clientHeight-50) }
#article{ width: expression(document.body.clientWidth-250) }
</style>
<![endif]-->
就兼容性而言，这应该与它的兼容性大致相同。它可以在没有javascript的情况下工作，并且它是流动的（或“响应”，因为它现在被称为）因此它应该适用于许多不同的屏幕尺寸。您可能希望添加一些媒体查询以在最小的屏幕上随机播放，具体取决于您如何进行缩放默认设置。
对于速度，有关于渲染速度的一个大瓶颈，那就是使用javascript进行DOM操作。只要把它拿出来你就可以使用你想要的任何CSS技术了。 （同意，IE5 / 6表达式不是最快的渲染方法，但它工作正常，我们在这里谈论严肃的遗留支持...）
On可能会争辩说使用HEADER，ASIDE和ARTICLE之类的HTML5元素是合适的，但是你需要一个HTML5填充程序脚本才能在某些IE版本中使用它，然后你就没有安装javascript的那些人失去了一些兼容性。
答案 5 :(得分：0)
一个更好的解决方案是将内容加载到容器div而不是使用iframe以及出现的所有问题（窗口/ iframe的2个滚动条）
为什么不使用javascript来使用AJAX提取页面内容。您还可以在加载当前页面后预加载下一个站点，以帮助节省时间。
您的布局看起来不错，但也许可以使侧边栏/标题滑出，以便最大化您网页上的目标网站 - 标题上的绊倒是相当不引人注目的，这是您应该模仿的目标。
答案 6 :(得分：-1)
我会将标题置于绝对位置，将侧边栏和内容框浮动;
如果您使用像lionbars.js或js.scrollpane这样的东西来帮助节省空间和美学，侧边栏会更清晰。