Question

我正在尝试为类似博客的应用程序构建布局：

固定位置固定宽度标题
固定位置固定宽度左右列
可滚动的居中固定宽度内容

所以基本上页面中间有一个可滚动的列，周围是固定的结构（不会滚动）。

我的问题：如果用户调整窗口太小，有没有办法阻止右栏覆盖中间栏？我想要一个滚动条..

以下是我提出的建议：

<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>

（顺便问一下，有没有一个网站可以分享这样的测试？）

正如您所看到的，当窗口太小时，左侧和中间列被正确处理，但右侧可能最终覆盖它们......有没有办法阻止它？

编辑：我注意到左列也有问题：/当水平滚动条出现并向右滚动时，中间列在左下方滚动...我是开始认为我走错了方向..：/

演示：http://jsfiddle.net/Gr58j/

Answer 1

更新到仅限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上的各种布局之一可以为您提供所需的内容。

固定位置列布局，最小宽度

1 个答案: