javascript - 具有固定宽度侧边栏的灵活布局

Question

我需要创建一个类似于此的灵活布局 http://jsfiddle.net/Lu9gQ/12/

具有以下属性:

• 示例中的标题
• “左边”必须有:width = ( 100% - #sidebar's width ), and height = ( 100% - #header's height )
• “侧边栏”必须有固定的宽度和高度 = ( 100% - #header's height )

• 只有当窗口的宽度大于固定宽度时，布局才必须是灵活的

  Is there any way to do it?
  

Answer 1

我已经使用 jquery 和一些 js 编写了一个解决方案来动态管理窗口大小调整。基本上，函数 conflayout() 管理设置，每次调整窗口大小时都会调用它，并且在开始设置原始窗口时也会调用一次。

要更改设计变得流畅的设置大小，请将 800 更改为:
if (window.innerWidth > 800) {

你喜欢的任何数字。

当屏幕的宽度变得小于该数字时，一个 div 将包裹在 body 的内容周围，它充当保持静态的包装器。

实例:

http://thepelican.me/liquidcssexample.html

---

js:

var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();

$(window).resize(function () {
    waitForFinalEvent(function(){

conflayout()

      //...
    }, 1, "reloadproperties");
});

function conflayout() {

if (window.innerWidth > 800) {

$('#left').width((window.innerWidth-$('#sidebar').width())+1) 
$('#left, #sidebar').css({minHeight: window.innerHeight-$('#header').height()}) 
 $("#wrapper").unwrap();
 $('#wrapper').css({width: 'auto !important'});

}
else
{
    if($('#contain').size() < 1) {
    $('body').wrapInner('<div id="contain" />');
    }
    $('#wrapper').css({width: '800px !important'});
    $('#contain').css({width: '800px',position: 'fixed', height: '100%' })
}

}

$(document).ready(function() { 
conflayout()
});