如何构建扩展到视口的简单CSS布局？

我尝试使用HTML/CSS，你可以在下面的线框看到建立这个非常简单的（视觉上来说）布局：如何构建扩展到视口的简单CSS布局？

/------------------------------------------\ 
|           | 
|    header div    | 
|           | 
|------------------------------------------| 
|          |S | 
|     main div    |C | 
|          |R | 
|          |O | 
|          |L | 
|          |L | 
|          | | 
|          |B | 
|          |A | 
|          |R | 
\------------------------------------------/

它有一个200万像素高“头” DIV填充100％视图端口水平，然后在它下面是“主”DIV填充剩余的空白空间（水平和垂直）的100％，滚动设置为“自动”，以解决任何溢出的内容。

困难的部分是让“主”DIV填充这个剩余空间而不使用JavaScript。当我真的不能使用百分比高度，并且仍然可以完全看到滚动条。

我想在这一点上，我愿意使用表布局的基本部分，如果这成为唯一的非JS选项。语义不会是一个问题。

那么我该怎么做呢？一个例子也会很棒！

来源

2009-11-14 Bill

+1为ASCII图表！ – 2009-11-14 21:34:32

不知道如何做扩展主，但要让滚动条显示：'div.main {overflow：scroll; }'你可能会在doctype.com – 2009-11-14 23:31:34

Stu - 这个问题上得到更好的结果。 – Moshe 2009-12-09 05:31:03

刚刚尝试弄清楚一些事情，我可以找到的最接近的纯CSS解决方案是使用百分比的高度和设置标头的最小高度为200px。然而，当视口不如预期的那么大时，底部div将略微超出倍数。

这里的一个好的解决方案是通过你的统计数据，并确定你的访问者使用的最常用屏幕高度大概是800px左右。然后设置像这样

#head { 
     height: 25% (depending on above figure) 
     min-height: 200px; 
} 
#body { 
     height: 75%; 
}

这将确保您的设计在大多数情况下完美运行。

虽然为什么有人想在这个日子里把所有事情都放在第一位，而且时代还没有让我诚实。我们都得到了很好用于滚动，并与现代设计的宽屏滚动是相当普遍存在的

来源

2009-11-14 21:35:06

哇这是一个很酷的主意！我并不是试图保持它在折叠之上，但是做我正在做的事会改进UI的使用方式。 – Bill 2009-11-14 21:40:50

我想这不会工作，因为我需要标题是一个静态高度。 – Bill 2009-11-14 22:49:06

如果保留是纯粹的风格，您仍然可以将标题伪造成静态高度。但是对于一个完美静态的头文件，你唯一的选择就是我相信的javascript和表格。 – 2009-11-15 00:25:53

我想你只能得到那种行为，除非使用javascript，即通过设置静态高度。数据不会溢出，从而导致滚动条，没有静态高度。除非你对iframe做了一些事情，我只是因为加载时间增加而感到沮丧。

来源

2009-11-14 21:22:57 Myles

..并且很可能不会被搜索漫游器索引为页面的一部分。即不适合SEO。 – BalusC 2009-11-14 21:25:47

嗯，但这是一个CMS，所以语义是一个非问题。 – Bill 2009-11-14 21:38:59

显示：表或 http://www.ironmyers.com/layouts/100_percent_Layouts/

来源

2009-11-14 22:01:27 glebm

我建议你尝试一个行之有效的布局是这样的：http://www.cssplay.co.uk/layouts/basics2.html

在那里你可以看到它是如何完成的。

来源

2009-11-14 22:31:11 MaikL80

我只是做真的类似的东西（客户端的工作，不能显示例子，对不起...）您可以使用边距像这样：

#head{ 
    margin-top: 0; 
    margin-left: 0; 
    margin-right: 0; 
    height: 200px; 
} 

#body{ 
    margin: 200px 0 0 0; 
    top: 200px; 
}

来源

2009-12-09 05:34:06 Moshe

如何构建扩展到视口的简单CSS布局？

回答

相关问题