谷歌波css布局

Question

如何在google wave中创建一个css布局，根据窗口大小自动调整大小，而不需要滚动（除了每个页面上使用滚动条的特定元素），每个div的定位方式与在网站上看到了？我真的很喜欢这个界面，一直试图在Dreamweaver上创建它（网络编程是一种爱好）而不使用表作为练习。

我正在从零开始学习CSS。

我已经包含了一张图片供参考。

非常感谢！

Answer 1

可以使用CSS浮点数来实现列。只需创建三个div标签并应用float: left并为每个标签分配宽度。

可以通过CSS实现100％的高度，但在Wave的情况下，可能正在使用javascript。特定逻辑取决于网站的设计，因为您需要考虑页面上的其他元素，例如标题栏。

如果您有兴趣，可以使用Firebug / Developer控制台检查Google Wave的基本布局是如何设置标签的。一个包装div，3列div，以及每个列中的div或两个div。

Answer 2

我做了一个关于如何尝试开始实现这种布局的例子：http://jsfiddle.net/steweb/A77gy/

使用宽度非常简单，因为您设置了浮动列，％widths / margin和opla'您获得了流体宽度布局。

我认为使用高度非常很难，因为如果你想要一个也影响高度的'流畅'行为，不使用abs定位（适合设置％高度，但你会失去％宽度）强大的），你也应该用JS做一些事情（即使我会避免做一些与JS的纯布局有关的事情） - 我为这个复杂的句子道歉：D。

通过处理这种布局“问题”，您还会注意到某些浏览器（... IE？...）有时表现得很奇怪...所以你需要一些技巧来制作一切在每个浏览器中工作（这是IMO的主要挑战）

标记：

<div id="header">
    <a href="#">link 1</a>
    &nbsp;|&nbsp;
    <a href="#">link 2</a>
    &nbsp;|&nbsp;
    <a href="#">link 3</a>
    &nbsp;|&nbsp;
    <a href="#">link 4</a> 
    <!-- or a <ul> -->
</div>
<div class="column" id="first-column">
    <div class="window" id="window-1"></div>
    <div class="window" id="window-2"></div>
</div>
<div class="column" id="second-column">
    <div class="window" id="window-3"></div>
</div>
<div class="column" id="third-column">
    <div class="window" id="window-4"></div>
</div>

的CSS：

body, html{
    height:100%;
}
#header{
    width:100%;
    height:30px;
    background:black;
}
.column{
    float:left;
    margin:1%
}
#first-column{
    width:10%;
}
#second-column{
    width:30%;
}
#third-column{
    width:50%;
}
.window{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:1px solid #CECECE;
    width:100%;
}
#window-1{
    height:100px;
}
#window-2{
    margin-top:10px;
    height:200px;
}
#window-3{
    height:310px;
}
#window-4{
    height:310px;
}