我需要创建一个类似于此http://jsfiddle.net/Lu9gQ/12/
的灵活布局具有以下属性:
只有当窗口的宽度大于固定宽度
时,布局才必须灵活Is there any way to do it?
答案 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;
}
我不知道你是否需要