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

我试图建立具有类似博客的应用的布局：固定宽度头固定位置列布局的最小宽度

固定位置定点

一个固定位置宽度左右立柱
可滚动中心固定宽度的内容

因此，基本上有一个在页面上，通过一个固定的结构包围的中间的可滚动列（即不会滚动距离）。

我的问题：是否有一种方法可以防止右栏覆盖中间的一个，如果用户调整窗口太小？我想一个滚动条，而不是..

这就是我想出了：

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

来源

2011-03-26 Joril

有一个网站http://jsfiddle.net/你的问题：http://jsfiddle.net/Gr58j/ – Praneeth 2011-03-26 17:45:13

谢谢:)在这里它是http://jsfiddle.net/TqTaE/ – Joril 2011-03-26 17:50:12

修订只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，铬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上的各种布局之一可能会为您提供所需的内容。

来源

2011-03-26 18:56:16 MikeM

非常感谢你的时间:) – Joril 2011-03-27 14:11:02

我花了数小时试图解决这个问题，只使用CSS，我担心唯一的方法是JavaScript的一个.. :(除非有一个网站有问题的问题，“CSS大师”.. X - ） – Joril 2011-03-27 16:55:51

哈，认为我通过添加一个外部包装div来获得仅css解决方案http://jsfiddle.net/pxfunc/aJPdJ/3/ – MikeM 2011-03-28 01:00:39

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

回答

相关问题