css - 获得更多垂直 div 和分隔页脚

Question

几个小时以来，我一直在尝试获取我在图片上发布的内容，但我无法获取... 为什么这些 CSS 对用户如此不友好？

例如如果绿色的 2 个 div 的长度不同，我的页脚将发布在最短的绿色 div 的正下方。

如果所有内容都可以针对 1000 像素的较窄窗口调整大小，我也希望如此。

谢谢!

所以...我发现我无法发布图片...

我试着在这里“画”:

---------------------------------------------------
|                 DIV                             |
---------------------------------------------------
|                  DIV                            |
--------------------------------------------------
|                  DIV                            |
---------------------------------------------------
|            some white space                     |
-----------------------   -------------------------
|                     |  |                        |
|                     |S |                        |
|                     |P |                        |
|                     |A |                        |
|                     |C |                        |
|                     |E |                        |
|DIV (about 30% width)|  | DIV (rest of width)    |
|                     |  |                        |
|                     |  |                        |
|                     |  |                        |
|                     |  |                        |
|                     |  |                        |
|                     |  |                        |
|_____________________|  |________________________|
|               some white space                  |
|_________________________________________________|
|                   div for footer etc.           |
|_________________________________________________|

Answer 1

以下是您布局的 HTML

<div>
  <div class="div1">
  </div>
    <div class="div1">
  </div><div class="div1">
  </div>
    <div class="left">
  </div>    <div class="right">
  </div>
    <div class="footer">
  </div>
</div>

下面是它的 CSS。

.div1
{
    width:100%;  
    border:1px solid black;
    height:50px;
    margin:5px;
}
.left
{
 width:30%;   
 border:1px solid black;
 margin:5px;
 height:50px;
 float:left;
}
.right
{
 width:60%;
 border:1px solid black;
 height:50px;
 float:right;
 margin:5px;

}
.footer
{
     width:100%;  
     border:1px solid black;
     height:50px;
    overflow: auto; 
    margin:5px;

}

改变高度。或者，如果您在 DIV 中添加内容，则无需更改高度，它们会自动获得高度。

See Fiddle Here