1

次のコードを試しました：

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

   <style type="text/css">
        #outer {
            width: 90%;
            height: 90%;
            margin: 5% 5% 5% 5%;
            background-color: #333;
        }
        #left-content {
            height: 90%;
            width: 50%;
            padding: 2em;
        }
        #right-content {
            height: 90%;
            width: 50%;
            padding: 2em;
        }
    </style>

    <div id="outer" style="display: block">
      <div id="left-content" style="display: block">xx</div>
      <div id="right-content" style="display: block">xx</div>
    </div>

</body>
</html>

ただし、外側の DIV はまだ画面の多くを占めていません。この DIV が 90% を埋め、5% の境界線を残すようにするにはどうすればよいですか?

4

2 に答える 2

4

あなたはあなたhtmlとbody高さを与える必要があります：

body, html{
    height: 100%;
}
于 2013-01-08T01:40:50.907 に答える
0

ドキュメントと本文を100％の幅/高さに設定する必要があります。

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

ちなみに、本当に左側に1つ、右側に1つ必要な場合は、内部divでfloat属性を使用する必要があります。それまたはいくつかのピクセルの完全なオフセット。

それらをフロートさせると、パディングまたはマージンのある2つの50％divを持つことで逃げることができなくなります。パディングとマージンは、divの幅/高さに追加されます。

あなたはcssボックスモデルを読みたいかもしれません。

于 2013-01-08T01:51:30.243 に答える