Как правильно добавить div внутри другого div, чтобы оригинальный дизайн не сломался?

Question

Как правильно добавить div внутри другого div, чтобы оригинальный дизайн не сломался?

0

У меня есть этот базовый HTML:

<div id="views-container">
    <div id="html-container"></div>
    <div id="original-page-container"></div>
    <div id="result-page-container"></div>
</div>

Это css для этих div:

#views-container > div{
    height:90%;
    width:33%;
    display:inline-block;
}

#html-container{
    background-color: pink;
}

#original-page-container{
    background-color: yellow;
}

#result-page-container{
    background-color: gray;
}

Это конечный результат:

Но тогда я хочу добавить два div внутри

HTML-контейнер

как это:

<div id="views-container">
    <div id="html-container">
        <div id="html-content-area">
            <textarea id="OutputHTML"></textarea>
        </div>
        <div id="html-info-area">
            bla bla bla
        </div>
    </div>
</div>

когда я это делаю, так выглядит страница.

Я хочу, чтобы textarea внутри html-content-area использовала всю ширину и высоту из html-контейнера. Позже мне нужно будет скрыть область html-content, чтобы показать что-то в html-info-area.

Как я могу добавить те div внутри html-content-area
поэтому они не нарушают оригинальный дизайн?

Я вставил код в скрипту: http://fiddle.jshell.net/eyCbB/

Заранее спасибо!

Boel 06 окт. 2013, в 18:52

Источник

1

#OutputHTML {position: относительный; ширина: 100%}
DevlshOne 06 окт. 2013, в 16:26
2

Ширина div будет по умолчанию равна 100% родительского контейнера. Если высота вложенного div должна быть объявлена в процентах, его родительский контейнер должен иметь указанную высоту (если только все контейнеры не используют проценты вплоть до html и body , в которых им затем должна быть задана указанная высота в процентах , пикселей или их).
Ian Campbell 06 окт. 2013, в 16:32

Теги:

html

css

1 ответ

Ещё вопросы

#OutputHTML {position: относительный; ширина: 100%}
Ширина div будет по умолчанию равна 100% родительского контейнера. Если высота вложенного div должна быть объявлена в процентах, его родительский контейнер должен иметь указанную высоту (если только все контейнеры не используют проценты вплоть до html и body , в которых им затем должна быть задана указанная высота в процентах , пикселей или их).

PSK · Accepted Answer · 2013-10-06T15-13-00.000Z

Надеюсь, вы искали это

Я сделал некоторые изменения в вашей скрипке.

#views-container > div{
    height:90%;
    width:32%;
    display:inline-block;
    vertical-align:top;
}
html,body {
    width:100%;
    height:100%;
}

#views-container {
    height:100%;
}

Посмотрите http://fiddle.jshell.net/eyCbB/1/