-1

次の div でパーセンテージの高さを割り当てると、なぜ外れるのですか? よろしくお願いします。

HTML:

<div id="div1">
    Test<br/>Test<br/>Test<br/>Test<br/>
    <div id="div2">Test</div>
</div>

CSS:

body{
    margin: 0     
}

#div1{
    position: absolute;
    width: 200px;
    height:100%;
    right: 0;
    background-color: #467
}

#div2{
    width: 50%;
    height: 99%;
    background-color: black;
    color: white
}
4

4 に答える 4

0

良い質問。Test<br/>は特大サイズとしてカウントされます。パディングを使用する場合と同様に、余分なサイズがカウントされます。子要素に絶対位置を使用できます。問題を修正しました。このフィドルをチェックしてください

于 2013-08-10T18:51:58.237 に答える
0

欠落しているオーバーフロープロパティのために出てきます。#div2 で非表示に設定しますか?

于 2013-08-10T18:38:05.453 に答える
0

#div2下に拡張する理由#div1は、親の 100% の高さに加えて、その#div2上の 4 行のテキストによって押し下げられるためです#div1。

では、これを解決する方法は？うーん... CSS ソリューションを提供することはできますが、あまり柔軟ではありません (JavaScript を使用するソリューションは、よりスケーラブルであり、保守の手間も少なくなります)。HTML 構造を少し変更したので、次のようになります。

<div id="div1">Test
    <br/>Test
    <br/>Test
    <br/>Test
    <div id="div3">
        <div id="div2">Test</div>
    </div>
</div>

変更を明確にするために、 の#div3周りに要素を追加しました#div2。さて、私の CSS では、この定義を に追加し、 CSS を次#div3のように変更しました。body

body {
    margin: 0;
    line-height:1.3em;
}
#div3 {
    position:absolute;
    top:5.2em;
    bottom:0;
    left:0;
    width:100%;
}

このアプローチでは、 の先頭から(およびその子) を開始するまでの距離を把握している必要があり#div1ます。さらに、これら 4 行のテキストの高さを正確に把握する必要があります。ブラウザーはテキストをわずかに異なる行の高さでレンダリングすることが多いため、. その後、その行の高さにテキストの行数 (この場合は 4 行) を掛けて、それを属性として設定するという単純な問題です。#div3#div2<body>top

これが何を達成するかを示すJSFiddleを次に示します。この答えが明確で、あなたが探しているものであることを願っています! そうでない場合はお知らせください。さらにお手伝いさせていただきます。幸運を！

于 2013-08-10T19:45:43.827 に答える
0

では、代わりにdiv1使用position: fixed;position: absolute;

jsfiddle

于 2013-08-10T19:51:39.527 に答える