4

私はこれがばかげていることを知っています..しかし、htmlタグとbodyタグの高さを100％に設定し、パディングとマージンを0に調整しても修正されませんでした!

div はまだ正しい高さを表示していません。代わりに、そのコンテンツの高さだけを表示しています。

これが私のコードです：

HTML

<!DOCTYPE html>
<html lang="e">
<head>
    <meta charset="utf-8" />

    <title>Musterportfoliovergleich</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="stylesheets/index.css" type="text/css">
    <!--<link rel="stylesheet" href="stylesheets/jquery.mobile.css" type="text/css">-->

    <script type="text/javascript" src="javascripts/jquery.js"></script>
    <script type="text/javascript" src="javascripts/jquery.mobile.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            console.log("Hello");
        });
    </script>
</head>

<body>
    <div id="pieChartCont1" class="container">
        Pie Chart Container 1
    </div>

    <div id="barChartCont1" class="container">
        <div id="barChartCont">
            Bar Chart Container
        </div>

        <div id="recBut">
            recBut
        </div>
    </div>

    <div id="pieChartCont2" class="container">
        Pie Chart Container 2
    </div>

    <div id="recCont" class="container">
        Recomendations Container
    </div>

    <div id="barChartCont2" class="container">
        Bar Chart Container 2
    </div>
</body>
</html>

CSS

html, body{
width:100%;
height:100%;
margin:0;
}

#pieChartCont1{background-color:red}
#barChartCont{background-color:green}
#recBut{background-color:blue}
#pieChartCont2{background-color:yellow}
#recCont{background-color:purple}
#barChartCont2{background-color:orange}

@media
only screen and (orientation:portrait){
.container{
    width:100%
}
#pieChartCont1{
    height:45%
}
#barChartCont1{
    height:10%
}
    #barChartCont{
        width:80%;
        height:100%;
        float:left;
    }
    #recBut{
        width:20%;
        height:100%;
        float:left
    }
#pieChartCont2{
    height:45%
}
#recCont{display:none}
#barChartCont2{display:none}
}

@media
only screen and (orientation:landscape) and (max-device-width:700px){
.container{
    height:100%;
    float:left;
}
#pieChartCont1{
    width:45%
}
#barChartCont1{
    width:10%
}
    #barChartCont{
        width:100%;
        height:80%
    }
    #recBut{
        width:100%;
        height:20%
    }
#pieChartCont2{
    width:45%
}
#recCont{display:none}
#barChartCont2{display:none}
}

@media 
only screen and (orientation:landscape) and (min-device-width:701px){
.container{
    width:50%;
    height:50%;
    float:left;
}
/*#pieChartCont1{}*/
/*#pieChartCont2{}*/
#recCont{
    clear:both
}
/*#barChartCont2{}*/
#barChartCont1{display:none}
}

私はそれを考え出した！jQuery Mobile スクリプトはビューをいじっていました。

4

2 に答える 2

5

パーセンテージの設定はせいぜい不安定です。私の経験では、JavaScript 関数を使用してページの幅と高さを取得し、div のサイズをパーセントではなくピクセルに設定する方がはるかに好きです。フォーマットしたい HTML 要素に id を設定し、document.getElementByIdサイズ変更に使用します。

var container = document.getElementById("container");
var barChartCont = document.getElementById("barChartCont");
//...and so on...

var viewportwidth;
var viewportheight;

function resize() {
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

    if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerWidth,
        viewportheight = window.innerHeight
    }

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
        viewportwidth = document.documentElement.clientWidth,
        viewportheight = document.documentElement.clientHeight
    }

    // older versions of IE

    else {
        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    }

container.style.height = viewportheight+"px";
barChartCont.style.height = (0.8*viewportheight)+"px";
//and so on...
}

この関数は、ブラウザの高さと幅を取得します。タグを次のように置き換えます

<body onload="resize()" onresize="resize()">

この関数は、ページが読み込まれたときに呼び出され、ページのサイズが変更されるたびに再度呼び出されます (<div>または使用している HTML タグのサイズを更新するため)。パーセンテージ。

試してみて、問題があればお知らせください。このスクリプトは、コーディングの歴史の中で何度も使用してきましたが、お気に入りのスクリプトの 1 つになり、最も頻繁に使用されています。

于 2013-01-21T16:50:39.483 に答える
0

フレキシブル ボックス レイアウトをご覧ください。高さの特定のパーセンテージでパネルを使用してアプリをレイアウトしようとしている場合は、はるかにうまく機能するはずです。

于 2013-02-10T19:27:28.777 に答える