0

ブラウザの幅だけでなく、ドキュメントの幅全体のパーセンテージを使用して、CSSのみを使用して要素を左に配置する方法はありますか？

すべての要素の高さと上からの配置がパーセンテージを使用して設定される水平スクロールWebサイトを作成しています。これは、すべてのブラウザーサイズに対応し、すべての要素の比率が維持されるようにするためです。

次のようなものを使用して、ページ上の要素の左（または右）の配置を変更しようとすると、

#my_element {
    position: absolute;
    top: 5%;
    width: 34%
    left: 10%;
}

これは、ブラウザウィンドウの幅の10％であり、本文やhtml要素の実際の幅ではありません。これは標準の垂直スクロールWebサイトでは意味がありますが、役に立ちません。

私の現在の回避策は、JavaScriptを使用して左に配置し、次のようなことを行うことです。

$('#my_element').css('left', $(document).width() / 100 * 10) //Position to 10% of the page.

これは機能しますが、JavaScriptが十分に速く読み込まれない場合、またはCSSアニメーションを使用してさまざまな要素をアニメーション化する場合にいくつかの問題が発生します。

4

2 に答える 2

2

パーセンテージで要素を設定するwidthと、その要素の親に対して測定されます。以下では、body要素はブラウザの 100% 幅div.boxで、要素の 50% 幅ですbody。

<html>
<head>
  <style>
    div.box { width: 50% }
  </style>
</head>
<body>
  <div class="box">
</body>
</html>

bodyおよびhtml要素の幅を実際に変更できます。

したがって、たとえば、ブラウザの 100% 幅にしたい 4 つの「スライド」または「パネル」がある場合、html要素に 400% 幅、body100% 幅を指定できます (それでもブラウザの 400%親はhtml要素です)、各スライドの幅は 25% です。

ここに例のフィドルがあります。

私が見る唯一の問題は、3 つのスライドがある場合、html要素が 300% になり、各スライドが 33.33333...% になることです。したがって、きれいな番号文書はありません。

<head>面白いことに、やなどの要素を台無しにすることもできます<script>。つまり、デフォルトをor ... fiddle<script>に変更することで、他の要素と同じように a のコンテンツを表示できます。display: noneinlineblock

于 2012-11-09T12:13:42.497 に答える
0

これは確かに可能です。クロスブラウザ互換であるためには、htmlタグとbodyタグにも幅と高さを設定する必要があります。

サンプル

html {
    width:100.01%;
    height:100.01%;
}
body {
    width:auto;
    height:auto;
}
div#normaldiv {
    border: 1px blue solid;
}
div#absolutediv {
    border: 1px red solid;
    position: absolute;
    top: 5%;
    left: 10%;
    width: 34%;
    height: 20%;
}
​

サンプルでは、​​これが実際に動作していることを示しています。ここでは、iframeがウィンドウを定義しています。.01を通常の100％に使用すると、ほとんどのピクセルの問題が処理されます。htmlとbodyの値を設定することで、IE6に存在するレイアウトの問題も手渡します。

于 2012-11-09T23:58:14.500 に答える