1

このhttp://jsfiddle.net/Lu9gQ/12/のような柔軟なレイアウトを作成する必要があります

次のプロパティを使用します。

  • 例のようなヘッダー
  • 「左」は次のようにする必要があります：width =（100％-＃サイドバーの幅）、およびheight =（100％-＃ヘッダーの高さ）
  • 「サイドバー」の幅と高さは固定されている必要があります=（100％-＃ヘッダーの高さ）

  • ウィンドウの幅が固定幅より大きい場合にのみ、レイアウトを柔軟にする必要があります

    Is there any way to do it?
4

2 に答える 2

2

jqueryといくつかのjsを使用して、ウィンドウのサイズ変更を動的に管理することで、これに対する解決策を作成しました。基本的に、この関数conflayout()はセットアップを管理します。これは基本的に、ウィンドウのサイズが変更されるたびに呼び出され、元の設定を開始するときにも1回呼び出されます。

デザインが流動的になるセットサイズを変更するには、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 に答える