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

我試圖建立具有類似博客的應用的佈局：固定寬度頭固定位置列布局的最小寬度

固定位置定點

一個固定位置寬度左右立柱
可滾動中心固定寬度的內容

因此，基本上有一個在頁面上，通過一個固定的結構包圍的中間的可滾動列（即不會滾動距離）。

我的問題：是否有一種方法可以防止右欄覆蓋中間的一個，如果用戶調整窗口太小？我想一個滾動條，而不是..

這就是我想出了：

<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

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

回答

相關問題