Javascript 如何使用div创建一个类似表的CSS布局？ 更新2
我在MacOSX上的Chrome上找到了一个暂时的解决方案。对于那些仍在尝试提出仅CSS解决方案或JavaScript解决方案的人，请继续，并让我知道您提出了什么！请：） 更新 下面的答案非常接近于一个全CSS的解决方案，所以我将尝试让它工作起来。同时，我也向JavaScript解决方案提出了这个问题。您将如何使用JavaScript来实现它？现在欢迎所有解决方案：）Javascript 如何使用div创建一个类似表的CSS布局？ 更新2,javascript,css,layout,Javascript,Css,Layout,我在MacOSX上的Chrome上找到了一个暂时的解决方案。对于那些仍在尝试提出仅CSS解决方案或JavaScript解决方案的人，请继续，并让我知道您提出了什么！请：） 更新 下面的答案非常接近于一个全CSS的解决方案，所以我将尝试让它工作起来。同时，我也向JavaScript解决方案提出了这个问题。您将如何使用JavaScript来实现它？现在欢迎所有解决方案：） 让我们看看我们能否一起解决这个问题 我正在尝试设置布局，查看图像 我使用的是“粘性页脚”技术，效果很好，我已经设置好了，这样
让我们看看我们能否一起解决这个问题 我正在尝试设置布局，查看图像 我使用的是“粘性页脚”技术，效果很好，我已经设置好了，这样每当两列中的一列变得更高时，另一列也会与它的高度相匹配。然而，问题是这两列不能自然到达页脚。。。我通过JavaScript强制执行高度 无论如何，所有相关的代码都可以在小提琴上看到 代码 问题
如果我需要澄清什么，请告诉我。有很多问题，所以我重写了它。我创造了你想要的东西。享受。=） 诀窍是让主区域的边距底部与页脚的高度相同（绝对定位）。因此，当你的蓝色物体变大时，它会比平时更早一点推到页面底部。 （编辑：此版本移动页脚，这更难做到；但是问题要求将蓝色区域初始化为尽可能大，请参阅下面的方法）
我们走！不幸的是，我不得不将其内联，因为JSFIDLE有一些严重的错误，妨碍了正确的显示。这个版本的蓝色区域从底部开始 当页面变大时，绝对定位的元素似乎无法自动滚动，所以我创建了一个虚拟的#main div，就像你做的一样，并让它填充整个视口，然后里面是#footer和#content（你的蓝色和红色内容）。#页脚是绝对定位的，因此它不占用空间/文档不关心它。随着#内容的展开，#主容器也随之展开，同时拖动页脚。使用页边距底部是防止页脚隐藏文本所必需的 要做到这一点，实际需要的CSS数量是，如果删除演示内容，大约只有5行和虚拟元素
<html>
<head>
<style>
body {
margin:0; padding:0;
}
* { /* just for demonstration */
box-sizing:border-box;
padding:5px;
border:1px dashed red;
-webkit-border-radius:10px; -moz-border-radius:10px;
background-color:hsla(0,50%,50%, 0.1);
}
/*important to use min-height not height*/
#main {
position:relative; width:100%; min-height:100%;
border:3px solid green;
}
#footer {
position:absolute;
left:0px; right:0px; bottom:0px; height:5em; /*can be anything*/
background-color:lightgrey;
}
#content {
position:relative;
box-sizing:border-box;
background-color:skyblue;
margin-left:auto; margin-right:auto;
padding-bottom:5em; /*must be same as #footer's height*/
margin-top:10%; /*browser bug: actually acts like 20%*/
width:50%;
min-height:80%; /*should equal 100%-marginTop*/
border:3px solid blue;
}
/* dependent elements */
#sidebar {
position:absolute;
top:0px; bottom:0px;
right:100%; width:7em;
background-color:pink;
overflow-y:scroll;
}
#topbar {
position:absolute;
bottom:100%; height:3em;
right:-10%; left:10%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
setTimeout("$('pre').animate({height:1500}, 3000)", 1000);
</script>
</head>
<body>
<div id="everything">
<div id="main">
<div id="content">
<div id="sidebar">
alpha
<br/>
beta
<br/>
gamma
<br/>
etc.
</div>
<div id="topbar">
Menu1 * Menu2 * Menu3 * ...
</div>
This is my site.
Yay.
<pre>
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
</pre>
</div>
<div id="footer">
footer
</div>
</div>
</div>
</body>
</html>
身体{
边距：0；填充：0；
}
*{/*仅供演示*/
框大小：边框框；
填充物：5px；
边框：1px红色虚线；
-webkit边框半径：10px；-moz边框半径：10px；
背景色：hsla（0,50%，50%，0.1）；
}
/*重要的是使用最小高度而不是高度*/
#主要{
位置：相对；宽度：100%；最小高度：100%；
边框：3倍纯绿；
}
#页脚{
位置：绝对位置；
左侧：0px；右侧：0px；底部：0px；高度：5em；/*可以是任何内容*/
背景颜色：浅灰色；
}
#内容{
位置：相对位置；
框大小：边框框；
背景色：天蓝色；
左边距：自动；右边距：自动；
填充底部：5em；/*必须与#页脚高度相同*/
利润率最高：10%；/*浏览器错误：实际上相当于20%*/
宽度：50%；
最小高度：80%；/*应等于100%余量*/
边框：3件纯蓝；
}
/*从属元素*/
#边栏{
位置：绝对位置；
顶部：0px；底部：0px；
右：100%；宽度：7em；
背景颜色：粉红色；
溢出y：滚动；
}
#顶栏{
位置：绝对位置；
底部：100%；高度：3em；
右：10%；左：10%；
}
setTimeout（$（'pre'）.animate（{height:1500}，3000）”，1000）；
阿尔法
贝塔
伽马射线
等
菜单1*菜单2*菜单3*。。。
这是我的网站。
耶。
等
等
等
等
等
等
等
等
等
等
等
等
等
等
等
等
等
页脚
是我，还是房间里坐在椅子上的粉红大象
- IE8-完美
- 铬完美
- 苏丹武装部队
<html> <head> <style> body { margin:0; padding:0; } * { /* just for demonstration */ box-sizing:border-box; padding:5px; border:1px dashed red; -webkit-border-radius:10px; -moz-border-radius:10px; background-color:hsla(0,50%,50%, 0.1); } /*important to use min-height not height*/ #main { position:relative; width:100%; min-height:100%; border:3px solid green; } #footer { position:absolute; left:0px; right:0px; bottom:0px; height:5em; /*can be anything*/ background-color:lightgrey; } #content { position:relative; box-sizing:border-box; background-color:skyblue; margin-left:auto; margin-right:auto; padding-bottom:5em; /*must be same as #footer's height*/ margin-top:10%; /*browser bug: actually acts like 20%*/ width:50%; min-height:80%; /*should equal 100%-marginTop*/ border:3px solid blue; } /* dependent elements */ #sidebar { position:absolute; top:0px; bottom:0px; right:100%; width:7em; background-color:pink; overflow-y:scroll; } #topbar { position:absolute; bottom:100%; height:3em; right:-10%; left:10%; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script> setTimeout("$('pre').animate({height:1500}, 3000)", 1000); </script> </head> <body> <div id="everything"> <div id="main"> <div id="content"> <div id="sidebar"> alpha <br/> beta <br/> gamma <br/> etc. </div> <div id="topbar"> Menu1 * Menu2 * Menu3 * ... </div> This is my site. Yay. <pre> etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. etc. </pre> </div> <div id="footer"> footer </div> </div> </div> </body> </html>