1

I need to a create a flexible layout similar to this http://jsfiddle.net/Lu9gQ/12/

With these following properties:

  • header as in the example
  • the "left" must have: width = ( 100% - #sidebar's width ), and height = ( 100% - #header's height )
  • the "sidebar" must have a fixed width and height = ( 100% - #header's height )

  • the layout must be flexible only if the window'width is greater than a fixed width

    Is there any way to do it?
4

2 回答 2

2

我已经使用 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()
});
于 2012-04-29T14:30:05.300 回答
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;
}

不知道是不是你需要的

于 2012-04-29T13:50:37.870 回答