我正在尝试为具有以下内容的类似博客的应用程序构建布局:
- 固定位置固定宽度的标题
- 固定位置固定宽度左右列
- 可滚动的居中固定宽度内容
所以基本上页面中间有一个可滚动的列，周围是固定结构(不会滚动)。
我的问题:如果用户将窗口调整得太小，是否有办法防止右侧的列覆盖中间的列？我想要一个滚动条..
这是我想出的:
<html>
<body>
<style type="text/css">
.header {
background: red;
position: fixed;
top: 0px;
width: 100%;
height: 100px;
}
.left {
background: yellow;
position: fixed;
top: 100px;
width: 180px;
}
.right {
background: green;
position: fixed;
top: 100px;
right: 0px;
width: 180px;
}
.content {
background: grey;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
width: 640px;
}
.wrapper {
padding: 0 180px;
}
</style>
<div class="header">HEADER</div>
<div class="left">LEFT</div>
<div class="wrapper">
<div class="content">
SCROLLABLE<br/>
CONTENT<br/>
</div>
</div>
<div class="right">RIGHT</div>
</body>
</html>
(顺便说一句，有没有网站可以分享这样的测试？)
如您所见，当窗口太小时，左列和中间列可以正确处理，但右列最终可能会覆盖它们...有什么办法可以防止这种情况发生吗？
编辑:我注意到左栏也有问题:/当水平滚动条出现并且您向右滚动时，中间栏在左栏下方滚动...我是开始认为我完全走错了路.. :/
最佳答案
已更新到仅 css 解决方案:
CSS:
body {margin:0;padding:0;}
.header, .left, .right {position:fixed;}
.header {background:#ff0000;top:0px;left:0;width:100%;height:100px;}
.left, .right {top:100px;width:180px;}
.left {background:#ffff00;left:0}
.right {background:#00ff00;right:0;}
.wrapperOuter {margin:100px 180px 0 180px;}
.wrapper {width:100%;overflow:auto;}
.content {background:#888888;width:640px;margin:0 auto;}
html:
<div class="header">HEADER</div>
<div class="left">LEFT</div>
<div class="wrapperOuter">
<div class="wrapper">
<div class="content">
SCROLLABLE<br/>
CONTENT<br/>
</div>
</div>
</div>
<div class="right">RIGHT</div>
原始答案:
可能有一种方法可以通过一些 css 掌握来处理这个问题，但是如果你不介意一点点 jQuery，你可以获得预期的效果
http://jsfiddle.net/pxfunc/aJPdJ/1/
在 IE 8、FF 3.6、Chrome 10 中测试
jQuery:
var baseContentWidth = 0;
var checkContentSize = function() {
$availableWidth = $(window).width() - $('.left').width() - $('.right').width();
$wrapper = $('.wrapper');
if (baseContentWidth === 0) {
baseContentWidth = $('.content').width();
}
if ($availableWidth < baseContentWidth) {
$wrapper.css({width: $availableWidth + "px", overflow: "scroll"});
} else {
$wrapper.css({width: "", overflow: ""});
}
};
// Re-check on window resize event
$(window).resize(function() {
checkContentSize();
});
checkContentSize();
CSS:
body {margin:0;padding:0;}
.header, .left, .right {position:fixed;}
.header {background:#ff0000;top:0px;left:0;width:100%;height:100px;}
.left, .right {top:100px;width:180px;}
.left {background:#ffff00;left:0}
.right {background:#00ff00;right:0;}
.wrapper {margin:0 180px;}
.content {background:#888888;margin:100px auto 0 auto;width:640px}
html:
<div class="header">HEADER</div>
<div class="left">LEFT</div>
<div class="wrapper">
<div class="content">
SCROLLABLE<br/>
CONTENT<br/>
</div>
</div>
<div class="right">RIGHT</div>
虽然这可能是您个人布局问题的解决方案，但我不想将 jquery 用作布局依赖项，因此也许有一些更好的方法可以仅使用 css 来处理此问题。此外，本网站的各种布局之一 Float-less CSS layout可能会满足您的需求。
关于css - 具有最小宽度的固定位置列布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5444038/