构建可调整大小的HTML布局

Question

<div id="main" style="height: 100%">
    <div id="content">
    </div>
    <div id="toolbar" style="height: 50px">
    </div>
</div>

因此，main div已调整大小，toolbar应具有固定高度，content的高度应为= height of main - 50px。如何才能使用样式（不使用JavaScript）？

Answer 1

多么糟糕，是吧？不要担心，你的问题仍然有效。让我们专注于回答这个问题。

我冒昧地做了三个例子 ¹ ：

• one that looks like your first picture（在所有修改之前）
• one with the most recent edit。
• one that does the same thing, but horizontally

让我们看看我是否可以正确解释它们。

_{¹ 可悲的是，根据新的CSS3属性resize，我无法使它们可调整大小。}

---

解释

所以，我使用了一种旧技术，你基本上使用100％高度的包装，然后给它一个负边距和一个对应于恒定高度值的正填充。负边距和正边距的组合将导致空白空间与具有固定高度的内容具有相同的高度。

.container{
    height: 400px;
}

.wrapper{
    height: 100%;
    margin-top: -50px;
    padding-top: 50px;
}

.content{
    height: 100%;
}

.fixed_content{
    height: 50px;
}

从技术上讲，固定内容正从包装器中“推出”，但由于包装器具有针对该元素调整的负边距，因此它看起来像正常流程。

为了更好地展示，我画了这张照片。

应该注意的是，您也可以在水平方向上做同样的事情，并进行一些小的调整。

.container{
    width: 400px;
    height: 400px;
}

.wrapper{
    height: 100%;
    width: 100%;
    padding-left: 50px;
    margin-left: -50px;
    white-space:nowrap;
}

.content{
    height: 100%;
    width: 100%;
    display: inline-block;
}

.fixed_content{
    height: 100%;
    width: 50px;
    display: inline-block;
}

原则上，它的工作方式相同。主要区别在于您必须“强制”内联元素保持在同一条线上，以便溢出而不是水平对齐。我使用white-space: no-wrap;和display: inline-block;

来做到这一点

这是我画的一张图片，展示了横向等效物。

可能性无穷无尽！您可以添加更多元素，只要您知道所有固定元素高度/宽度的总和。

• Here's one with top and bottom toolbars as well as 2 50% height content elements
• Here's one using both vertical and horizontal wrappers。

表格布局适用于懦夫。所有很酷的程序员都使用div。 ;）

---

First example |代码

HTML

<div class='container'>
    <div class='node_1'>
        <div class='wrapper'>
            <div class='node_1_1'>
                <div class='wrapper_2'>
                    <div class='node_1_1_1'></div>
                    <div class='node_1_1_2'></div>
                </div>
            </div>
            <div class='node_1_2'></div>
        </div>
    </div>
</div>

CSS

div{
   -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 2px;
}

.container{
    border: 2px solid red;
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

.node_1{
    border: 2px solid gray;
    height: 100%;
}

.wrapper{
    padding: 52px 0 0 0;
    margin-top: -52px;
    height: 100%;
}

.node_1_1{
    border: 2px solid purple;
    height: 100%;
}

.node_1_2{
    height: 50px;
    border: 2px solid #b80808;
    margin-top: 2px;
}

.wrapper_2{
    padding: 152px 0 0 0;
    margin-top: -152px;
    height: 100%;
}

.node_1_1_1{
    border: 2px solid green;
    height: 150px;
}

.node_1_1_2{
    border: 2px solid orange;
    height: 100%;
    margin-top: 2px;
}

---

Second example |代码

HTML

<div class='container'>
    <div class='wrapper'>
        <div id="content"></div>
        <div id="toolbar"></div>
    </div>
</div>

CSS

div{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 2px;
}

.container{
    border: 2px solid red;
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

.wrapper{
    height: 100%;
    padding: 52px 0 0 0;
    margin-top: -52px;
}

#content{
    height: 100%;
    border: 2px solid green;
}

#toolbar{
    height: 50px;
    border: 2px solid orange;
    margin-top: 2px;
}

---

Third example |代码

HTML

<div class='container'>
    <div class='wrapper'>
        <div id="content"></div>
        <div id="vert-toolbar"></div>
    </div>
</div>

CSS

div{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 2px;
}

.container{
    border: 2px solid red;
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

.wrapper{
    height: 100%;
    width: 100%;
    padding: 0 52px 0 0;
    margin: 0 -52px 0 0;
    white-space:nowrap; /*Force elements to stay on horizontal plane*/
}

#content{
    height: 100%;
    width: 100%;
    border: 2px solid green;
    display: inline-block;
}

#vert-toolbar{
    height: 100%;
    width: 50px;
    border: 2px solid blue;
    display: inline-block;
    margin-left: -2px; /*For the borders (2+2 = 4, -2 for a 2px "padding"*/

}