0

このjsFiddleは問題を示しています。div0div が兄弟の上マージンと「折りたたまれる」のを防ぐことはできませんでしたdiv1。(以下、HTML)

ビューポート全体を垂直に広げ、その中の赤div0がビューポートの左上隅にぴったり重なるようにします。( の配置とその内容は正確に希望どおりであり、いかなる方法でも変更しないでください。)rectdiv1

div0と の両方に境界線を配置してマージンの折りたたみを無効にしようとしましたdiv1が、jsFiddle が示すように、これは違いがありません。

関連する HTML は次のとおりです。

<!doctype html>
<body>
    <div id="div0">
        <svg id="svg0" width="50px" height="50px">
            <g>
                <rect x="0px" y="0px"
                      width="50px" height="50px" style="fill:red;"></rect>
            </g>
        </svg>
    </div>

    <div id="div1">
        <div id="div2">
            <svg id="svg1" width="100px" height="100px"></svg>
        </div>
    </div>
4

3 に答える 3

1

ここにあなたのための解決策があります。.wrapperを含むクラスを追加しabsolute positionて、要素を含め、ドキュメントの伸縮性を維持しました。また、赤が含まれている外部に流れないように、IDに追加overflow: hiddenしました。div0svg rectdiv

これが更新された>>>JSFiddle<<< です

HTML:

<div class="wrapper">
    <div id="div0">
        <svg id="svg0" width="50px" height="50px">
            <g>
                <rect x="0" y="0" width="50px" height="50px"></rect>
            </g>
        </svg>
    </div>
    <div id="div1">
        <div id="div2">
            <svg id="svg1" width="100px" height="100px"></svg>
        </div>
    </div>
</div>

CSS:

body {
    margin: 0;
    padding: 0;
}
.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid blue;
}
#div0 {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background-color: yellow;
    border: 1px solid blue;
    overflow: hidden;
}
#div1 {
    margin-top: 20px;
    border: 1px solid green;
    background: lightgray;
    min-height: 27px;
    display: -webkit-flex;
    display: flex;
}
#div2 {
    background: black;
    margin: 0px auto;
}
rect {
    fill: red;
}
于 2013-11-05T03:31:53.223 に答える
0

position:relativeOK、私は解決策を見つけました: CSSの をコメントアウトしbodyます。これは、元のフィドルのこのリビジョンに示されています。これと元のフィドルの唯一の違いは、コメントアウトされた行だけであることに注意してください。

(盲目的な試行錯誤によってこの解決策を見つけたと言うのは恥ずかしいことです。新しいバージョンが機能し、元のバージョンが機能しなかった理由がわかりません。)

于 2013-11-05T11:47:57.153 に答える
0 
#div0 {
height:100vh;
}

ビューポートの高さには vh を使用できます。

于 2013-11-05T02:53:23.050 に答える