2

親コンテナー内に div があり、幅を 300 ピクセル、高さを親と同じにする必要がありますが、両側に 10 のマージンがあります。height: 100%; margin: 10px;とmargin-bottomを負の値に設定することで可能であるという回答がいくつか見つかりました-20px（上下の10pxのスペースを補うため）。私はこのように試しました：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;width:100%;margin:0;padding:0;">
    <head></head>
    <body style="height:100%;width:100%;margin:0;padding:0;">
        <div style="height:100%;width:100%;margin:0;padding:0;">
            <div style="border:1px solid black;height:100%;width:300px;margin-top:10px;margin-left:10px;margin-bottom:-20px;">
                Hello world!
            </div>
        </div>
    </body>
</html>

しかし、うまくいきません。divは親コンテナと同じ高さなので、一番下に重なって……

4

2 に答える 2

2 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;width:100%;margin:0;padding:0;">
    <head></head>
    <body style="height:100%;width:100%;margin:0;padding:0;">
        <div style="height:100%;width:100%;margin:0;padding:0;position:relative">
            <div style="border:1px solid black;width:300px;position:absolute;left:10px;top:10px;bottom:10px;">
                Hello world!
            </div>
        </div>
    </body>
</html>

また、JAVASCRIPTによる

<div style="height:100%">
    <div class="child"></div>    
</div>

JS

docHeight = document.body.clientHeight;
childHeight = docHeight-22; //2px due to borders
document.getElementsByClassName('child').style.height = childHeight;

CSS

.child {padding:10px}

于 2012-05-07T12:42:39.653 に答える
0 
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;width:100%;margin:0;padding:0;">
<head></head>
<body style="height:100%;width:100%;margin:0;padding:0;">
    <div style="height:100%;width:100%;margin:0;padding:10; background-color:#FF0000;">
        <div style="border:1px solid black;height:100%;width:300px; background:#0000FF;">
            Hello world!
        </div>
    </div>
</body>

背景色を削除するだけです。

親にパディングを追加し、子の余白を削除します

于 2012-05-07T12:14:49.037 に答える