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

时间:2011-03-26 17:42:03

标签: css layout

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

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

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

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

以下是我提出的建议:

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

1 个答案:

答案 0 :(得分:2)

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