构建可调整大小的HTML布局 [英] Building a resizable HTML layout

问题描述

 < div id =mainstyle =height：100％> 
< div id =content> 
< / div> 
< div id =toolbarstyle =height：50px> 
< / div> 
< / div> 
  

所以， main 工具栏应具有固定高度，内容的高度应为 - 50px。

解决方案

有什么混乱，是吗？不要担心，你的问题是，仍然是有效的。让我们只关注于回答这个问题。

我自由地做了三个例子 ¹

：

• 使用垂直和水平封页。

ul>



表布局适用于wimps。所有酷程序员都使用 div 。 ;）





---





第一个示例 |代码





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; 
} 
  





---





第二个示例 |代码





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; 
} 
  





---





第三个例子 |代码





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; / *使元素停留在水平面上* / 
} 
 
 #content {
 height：100％; 
 width：100％; 
 border：2px纯绿色; 
 display：inline-block; 
} 
 
＃vert-toolbar {
 height：100％; 
 width：50px; 
 border：2px solid blue; 
 display：inline-block; 
 margin-left：-2px; / *对于边框（2 + 2 = 4，-2为2pxpadding* / 
 
} 
  




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

So, main div is been resized, toolbar should have fixed height and content's height should be = height of main - 50px. How is it possible to do so using styles only (without using JavaScript)?

解决方案

What a mess, huh? Don't worry about it, your question was and still is valid. Let's just focus on answering the question.

I took the liberty of making three examples¹:

• one that looks like your first picture (before all the edits)
• one with the most recent edit.
• one that does the same thing, but horizontally

Let's see if I can explain them properly.

_{¹ Sadly, I couldn't make them resizable according to the new CSS3 property resize.}

---

The explanation

So, I used an old technique where you basically use a wrapper with 100% height, then give it a negative margin and a positive padding corresponding to the constant height value. The combination of a negative margin and a positive padding will result in an empty space with the same height as the content with a fixed height.

.container{
    height: 400px;
}

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

.content{
    height: 100%;
}

.fixed_content{
    height: 50px;
}

Technically, the fixed content is being "pushed out" from the wrapper, but since the wrapper has a negative margin that adjusts for that element, it looks like normal flow.

To better demonstrate, I drew this picture.

It should be noted that you can do the same thing horizontally as well, with some minor adjustments.

.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;
}

In principle, it works the same way. The main difference is that you have to "force" the inline elements to stay on the same line, so that the overflow is instead horizontally aligned. I do that by using white-space: no-wrap; and display: inline-block;

Here is a picture I drew that demonstrate the horizontal equivalent.

The possibilities are endless! You can add more elements to it, as long as you know the sum of all the fixed elements height/widths.

• 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.

Table layouts are for wimps. All the cool programmers use divs. ;)

---

First example | Code

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

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

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"*/

}

这篇关于构建可调整大小的HTML布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！