1

同じ質問のバージョンを続けて申し訳ありませんが、これを達成するのは難しいようです。これまでのコードは次のとおりです。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

   <style type="text/css">

       body, html{
    height: 100%;
}
        #outer {
            width: 90%;
            height: 90%;
            margin: 5% 5% 5% 5%;
            background-color: #333;
        }
        #left-content {
            height: 100%;
            width: 50%;
            float:left;
        }
        #right-content {
            height: 100%;
            width: 50%;
            float:left;
        }
    </style>

    <div id="outer">
      <div id="left-content" style="background-color: red;">xx</div>
      <div id="right-content" style="background-color: yellow;">xx</div> 

<!-- we need to clear -->
<br style="clear:both" />

    </div>

</body>
</html>

スクロールバーが表示されているようですが、外側のDIVが画面の90％を占め、スクロールバーがないようにしたいだけです。

ここでフィドルを見つけてください。

4

5 に答える 5

1

これは私が見たことのない非常に興味深いバグです。厄介なbody { overflow:hidden; }アプローチを使わずに、いくつかの修正を見つけました。

1 - display:inline-block の使用(実際には必要ありません)

    #outer {
      display:inline-block;
        width: 90%;
        height: 90%;
        margin: 5% 5% 5% 5%;
        background-color: #333;
    }

2 - マージンの代わりにパディングを使用する(実際には必要ではありません)

    #outer {
        width: 90%;
        height: 90%;
        padding: 5% 5% 5% 5%;
        background-color: #333;
    }

3 - 絶対位置の使用(推奨)

    #outer {
        position:absolute;top: 5%;bottom: 5%;right: 5%;left: 5%;
        background-color: #333;
    }

この問題をさらに調査して、この回答を編集します。

http://www.w3.org/TR/CSS2/box.html#box-dimensionsに従って

パーセンテージは、生成されたボックスの包含ブロックの幅に対して計算されます。これは「margin-top」と「margin-bottom」にも当てはまることに注意してください。

つまり、ボディに 90% の幅を設定すると、予想される 100% ではなく、マージンの 5% が 90% のうちの 5% になり、「バグ」が発生します。- 同じことがパディングにも当てはまります。

于 2013-01-08T03:18:26.170 に答える
0

オーバーフロー プロパティを hidden( overflow:hidden;) に変更し、#outer のマージンを に変更しmargin:2.5% 5%;ます。完全なコードは次のとおりです。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

   <style type="text/css">

       body, html{
    height: 100%;
    overflow:hidden;
}
        #outer {
            width: 90%;
            height: 90%;
            background-color: #333;
            margin: 2.5% 5%;
        }
        #left-content {
            height: 100%;
            width: 50%;
            float:left;
        }
        #right-content {
            height: 100%;
            width: 50%;
            float:left;
        }
    </style>

    <div id="outer">
      <div id="left-content" style="background-color: red;">xx</div>
      <div id="right-content" style="background-color: yellow;">xx</div> 

<!-- we need to clear -->
<br style="clear:both" />

    </div>

</body>
</html>

うまくいくことを願っています！

于 2013-01-08T03:35:36.467 に答える
0

これを試して：

body, html{
        height: 100%;
        margin: 0;
    }
    #outer {
        width: 90%;
        height: 90%;
        position: absolute;
        margin: 5%;
        background-color: #333;
    }
于 2013-01-08T03:18:09.023 に答える
0

これが私がそれを行う方法です: http://jsfiddle.net/remibreton/8hfwp/1/

ここでの秘訣は、外側の要素の幅と高さをブラウザーに把握させておくことです。top:0; bottom:0; left:0; right:0;そのためには、使用可能なスペース全体を確実に埋めるように指定します。次に、追加margin:5%;して高さと幅を 90% に減らします。外側の要素は、そのposition:relative;中に絶対配置できるようにする必要があります。

content 要素の場合、どちらもwidth:50%; height:100%. あなたがする必要があるのは、適切な人が特別なleft:50%扱いを受けるようにすることです.

HTML

<div id="outer">
    <div class="content left">xx</div>
    <div class="content right">xx</div> 
</div>

CSS

body, html { height: 100%; }
#outer { position:absolute; margin:5%; bottom:0; top:0; left:0; right:0; overflow:hidden; } /* margin:5% to make sure the width and height are actually 90%. Overflow is optional */
.content { position:absolute; width:50%; height:100%; } /* Applies to both content element */
.content.left { background-color:yellow; }
.content.right { background-color:red; left:50%; } /* Left position is equal to the right content element */

この方法により、以前よりもクリーンで柔軟な CSS が可能になります。おまけインターネットポイント！

于 2013-01-08T03:18:38.623 に答える
-1

マージンの崩壊がうまくいかなかったことが原因のようです。に追加padding:0.01pxする<body>と、正常に機能します。

画面に固定サイズのものが必要な場合は、おそらく次のposition:fixedように使用する必要があります。

#outer {
    position:fixed;
    left: 5%; right: 5%; top: 5%; bottom: 5%;
    background:#333;
}
#left-content {
    position:absolute;
    left:0; top: 0; width:50%; bottom: 0;
}
#left-content {
    position:absolute;
    left:50%; top: 0; width:50%; bottom: 0;
}
于 2013-01-08T03:16:36.497 に答える