google wave css布局

Question

如何创建一个css布局，就像google wave上看到的那样，根据窗口大小自动调整大小，而不需要滚动(除了每个页面上使用滚动条的特定元素)，每个div的位置与网站上看到的类似？我真的很喜欢这个界面，并且一直在尝试在dreamweaver上创建它(web编程是一种爱好)，而不是使用表格作为练习。

我正在从头开始学习css。

我附上了一张图片以供参考。

非常感谢！

​

​

Answer 1

关于如何开始实现这种布局，我做了一个小示例：http://jsfiddle.net/steweb/A77gy/

使用宽度非常简单，因为您设置了浮动列、%宽度/边距和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;
}

Answer 2

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

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

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