灵活的布局,固定宽度的侧边栏

时间:2012-04-29 13:29:13

标签: javascript jquery css layout

我需要创建一个类似于此http://jsfiddle.net/Lu9gQ/12/

的灵活布局

具有以下属性:

  • 标题,例如
  • “left”必须:width =(100% - #sidebar的宽度),height =(100% - #header的高度)
  • “侧边栏”必须有固定的宽度和高度=(100% - #header的高度)
  • 只有当窗口的宽度大于固定宽度

    时,布局才必须灵活
    Is there any way to do it?
    

2 个答案:

答案 0 :(得分:2)

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

要更改设计变得流畅的设置大小,请更改800 in:
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()
});

答案 1 :(得分:0)

用这个替换你的css

body{
margin:0px
}
#wrapper {
width:100%;
min-width:500px;
height:auto;
overlay:hidden;
}
#header {
height:5%;
width:100%;        
background-color:yellow;
}
#content {
width:100%;
height: auto;
min-height:500px;
}
#left {
height: auto;
min-height: 100%;
min-width: 90%;
position: absolute;
width: 95%;
background-color:blue;
}
#sidebar {
min-height: 100%;
position: absolute;
right: 0;
top: 5%;
width: 100px;
background-color:red;
}

我不知道你是否需要