Question

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

的灵活布局

具有以下属性：

标题，例如
“left”必须：width =（100％ - ＃sidebar的宽度），height =（100％ - ＃header的高度）
“侧边栏”必须有固定的宽度和高度=（100％ - ＃header的高度）
只有当窗口的宽度大于固定宽度
时，布局才必须灵活
```
Is there any way to do it?
```

Answer 1

我已经使用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()
});

Answer 2

用这个替换你的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;
}

我不知道你是否需要

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

2 个答案: