Как заставить этот div охватывать высоту области просмотра?

0

Этот jsFiddle показывает проблему. Я не удалось предотвратить div0 делений от "рушится" ее верхний край с этим его собрата, div1. (HTML ниже).

Я хочу, чтобы div0 охватывал весь видовой div0 по вертикали, а красный rect внутри него отображался в верхнем левом углу rect просмотра. (Размещение div1 и его содержимого в точности соответствует желанию, и его нельзя изменять каким-либо образом).

Я попытался отключить крах полей, установив границы вокруг 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>
Теги:

3 ответа

1

Вот вам решение. Я добавил класс .wrapper с absolute position, чтобы содержать элементы и поддерживать эластичность в вашем документе. Я также добавил overflow: hidden в ваш div0 идентификатор, чтобы предотвратить красный svg rect из протекающих за пределами этого содержащего div.

Вот обновленный >>> 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;
}
Поделиться
  • 0
    Интересно: ваше решение работает, но не по той причине, которую вы описываете, потому что в вашем CSS вы используете селектор .wrapper , тогда как в вашем HTML у вас есть id=wrapper , а не class=wrapper . Итак, CSS для .wrapper имеет никакого эффекта. В конце концов я обнаружил (и только что опубликовал) решение, которое (я думаю) ближе к цели.
0

Хорошо, я нашел решение: закомментируйте position:relative в CSS для body. Это проиллюстрировано в этом пересмотре оригинальной скрипки. Обратите внимание, что единственная разница между этой и оригинальной скрипкой - это только что упомянутая строка с комментариями.

(Мне стыдно сказать, что я нашел это решение путем слепых проб и ошибок, я понятия не имею, почему новая версия работает, а оригинальная - нет.)

Поделиться
0 
#div0 {
height:100vh;
}

Вы можете использовать vh для высоты видового экрана.

Поделиться
  • 0
    интересная идея, но вы проверили это в jsFiddle, который я предоставил? (это смысл предоставления jsFiddle, вы знаете ...)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню