2

アプリケーション テンプレートのように見えるように Web サイトを構築しようとしています。

いくつかのチュートリアルを読んだ後、これまでに得たものは次のとおりです。

ここに画像の説明を入力

少し複雑に見えるかもしれませんが、以下に説明します。

私のテンプレートには多くの div が含まれており、そのうちのいくつかは余分かもしれません。とにかく、すべての div に絶対位置を指定し、必要に応じてoverflow-x とoverflow-y を追加することで、上のように見えるテンプレートになりました。黒いバーは、私が持っていることを示しています私が望むようにdivスクロール。

いくつかのメモ: Tasks テーブルは、内部に大きなテーブルを含む div であるため、垂直スクロールと水平スクロールの両方を追加しました。

右側のパネルの div: 右側のパネルと同じ幅で高さが異なる 4 ～ 5 個の div だけで、特定のスタイル設定のない他の div と h3 タグがたくさんあります。そのため、右側のパネルを垂直にスクロールしたかったのです。

今私の問題は、特にブラウザのウィンドウのサイズを変更したときに、右側のパネルを水平方向にスクロールできなかったことです。実際にブラウザのウィンドウ幅を狭くするとこんな感じに・・・

ここに画像の説明を入力

さらに幅を狭めても、右パネルが中央と左パネルの両方をカバーするようにスライドします。 ここに画像の説明を入力

これは起こるはずですか？ブラウザのサイズを変更すると、右側のパネルが中央のパネルのように水平にスクロールしないのはなぜですか? それは、右側のパネル内に div があるためですか?

4

1 に答える 1

0

最速の方法は、タスク コントロールとタスク テーブルの幅と高さを JavaScript またはより良い jquery で計算することです。

jqueryの例

$(function() {
res();
$(window).resize(function() {
res();
});

function res(){
var windowWidth = $(window).width(); 
var leftPanelWidth = $('left-panel').width();  
var RightPanelWidth = $('left-panel').width();  
$('#task-controls','#task-table').width(windowWidth-leftPanelWidth-RightPanelWidth); 
}
});

編集：ここでは、修正され、コメントされた完全なバージョン

<!-- load jquery from the internet, if u dont want to download it -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
//run when dom (website) was load completly. same as "$(document).ready()"
$(function() {
    //call own function on first time
    res();

    //evertime when window will be reiszed by user
    $(window).resize(function() {
        //call function again
        res();
    });

    function res(){
        //get sizes
        var windowWidth = $(window).width(); 
        //the '#left-panel' searches for an html element with the id left-panel
        var leftPanelWidth = $('#left-panel').width();  
        var RightPanelWidth = $('#left-panel').width();  
        //set width for emements with ids #task-controls and #task-table. size is window width minus both menus
        $('#task-controls','#task-table').width(windowWidth-leftPanelWidth-RightPanelWidth); 
    }
});
</script>

ウェブサイトのようなアプリを構築したい場合は、jquery http://api.jquery.com/ http://www.w3schools.com/jquery/jquery_ref_selectors.aspを学ぶ必要があります。

または私はあなたの質問を誤解しましたか？中央パネルのトリミングを防止したい

于 2013-05-15T12:11:30.470 に答える