html - 如何在另一个 div 中正确添加 div 以免破坏原始设计？

Question

我有一个基本的 HTML：

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

这是那些 div 的 css：

#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>

当我这样做时，这就是页面的呈现方式。

我希望html-content-area 中的 textarea 使用html-container 中的所有宽度和高度。稍后，我需要隐藏html-content-area 以便在html-info-area中显示某些内容。

我怎样才能在 html-content-area 中添加这些 div，
这样它们就不会破坏原始设计？

我将代码粘贴在小提琴中：http: //fiddle.jshell.net/eyCbB/

提前致谢！

Answer 1

希望你在找这个

我对你的小提琴做了一些改变。

#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/