如何使用CSS/HTML将组件推送到可用空间的边缘？

如何指定可在所有现代浏览器中工作的CSS/HTML布局，并将组件推送到可用空间的边缘并提供最大化的中心区域 - 减去边缘组件的大小。事情是这样的：如何使用CSS/HTML将组件推送到可用空间的边缘？

------------------------------ 
| | north   |  | 
| |     |  | 
------------------------------ 
| |     |  | 
| |     |  | 
| |     |  | 
|west|  center  |east | 
| |     |  | 
| |     |  | 
| |     |  | 
| |     |  | 
------------------------------ 
| |  south  |  | 
| |     |  | 
------------------------------

的目标是，到中心组件的可用空间是由北，南，东，西部的内容的实际大小决定。

这是可能的解决与纯CSS/HTML没有任何JS？

该html实现了Firefox和Webkit的目标，但在IE9中，中心div无法访问可用的垂直空间。

<!doctype html> 
<html> 
<head> 
</head> 
<body> 
    <div 
     style="position: absolute; top: 20px; left: 20px; width: 200px; height: 200px;"> 
     <table style="width: 100%; height: 100%; border:1px solid gray; border-collapse:collapse;cell-padding:0px;"> 
      <colgroup> 
       <col style="width: 1%" /> 
       <col style="width: 100%" /> 
       <col style="width: 1%" /> 
      </colgroup> 
      <tbody> 
       <tr height="1%"> 
        <td></td> 
        <td>north</td> 
        <td></td> 
       </tr> 
       <tr height="100%"> 
        <td>west</td> 
        <td><div style="width:100%;height:100%;border:1px solid green;">center</div></td> 
        <td>east</td> 
       </tr> 
       <tr height="1%"> 
        <td></td> 
        <td>south</td> 
        <td></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</body> 
</html>

来源

2012-01-05 yarrumretep

所以，你只是想在各方面的面板一定宽度的页面？ – jacktheripper 2012-01-05 17:49:55

我想要一个将N，E，S，W内容推到可用空间边缘（可能位于其他组件内）的布局，然后提供一个与宽度一起工作的最大中心空间：100％，高度：100％。如果您在IE9中查看上述HTML代码，您会发现，在北/东/南/西/西词汇中找到一个不错的绿色边框，您会看到一个垂直方向的小框。中心没有提供其内容的高度（在IE中 - 所有其他都可以）。 – yarrumretep 2012-01-05 18:02:35

为什么你不能在这里使用JavaScript解决方案？在大多数情况下，它最好是基于表格的布局。 – 2012-01-05 18:07:15

试试这个代码。

<html> 
<head> 
<style type="text/css"> 

.top { 
    background-color: #18ff3a; 
    width: 100%; 
    height: 50px; 
    position: relative; 
    z-index: 999; 
} 

.bottom { 
    background-color: #3900ff; 
    bottom: 0px; 
    width: 100%; 
    height: 50px; 
    position: relative; 
} 

.left { 
    background-color: #ff5a91; 
    top: 0px; 
    width: 50px; 
    height: 100%; 
    position: relative; 

} 
.right { 
    background-color: #ffcf0e; 
    top: 0px; 
    right: 0px; 
    width: 50px; 
    height: 100%; 
    position: absolute; 
} 

</style> 
</head> 
<body style="margin:0px;padding:0px;width:100%;height:100%;"> 
<div style="position:relative;"> 
    <div class="top"></div> 
    <div class="left"></div> 
    <div class="right"></div> 
    <div class="bottom"></div> 
</div> 
</body> 
</html>

来源

2012-01-05 18:01:28 jacktheripper

谢谢，杰克，但整个问题是我们不知道左/右有多宽以及顶部/底部需要显示所有内容的高度。我们希望浏览器找出并给我们布局 - 但也许我们必须使用您提出的方案和javascript来保持距离以实现更改。 – yarrumretep 2012-01-05 19:29:45

您仍然可以使用它，只需将静态宽度和高度设置为“min-width”和“min-height”。那么它应该随着它们里面的内容而流动，但绝不会比你的最小尺寸小。 – 2012-01-05 19:34:46

你可能想在这个岗位使用盒模型，如：CSS 100% height with padding/margin

而且记得YOUT HTML的开头使用DOCTYPE像

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

或

<!DOCTYPE html>

对于html 5.

文档类型会告诉浏览器如何行为，它们将与该指令几乎相同。

有关于本网站上的盒子模型的一些解释http://www.w3schools.com/css/css_boxmodel.asp

来源

2012-01-05 18:03:13

新的网页不适用于过渡文档类型。始终严格使用。没有“html5文档类型”这样的东西。你显示的第二个是html文档类型，句号。 – Rob 2012-01-08 16:57:36

下面的代码将同时IE和Mozilla工作：

Final Result

<html> 
<head> 
</head> 
<body> 

<div style="position: absolute;width: 98%; height: 98%;"> 

<table style="border: 1px solid gray; text-align: center; vertical-align: middle; height: 100%; width: 100%;"> 

<colgroup> 
<col style="width: 1%"> 
<col style="width: 100%; height: 100%;"> 
<col style="width: 1%"> 
</colgroup> 

<tbody> 

<tr height="1%"> 
<td></td> 
<td style="vertical-align:middle">north</td> 
<td></td> 
</tr> 

<tr height="100%"> 
<td>west</td> 
<td style="border-top: 1px solid green; border-left: 1px solid green; border-right: 1px solid green; border-bottom: 1px solid green; vertical-align: middle; height: 100%; width: 100%;">center</td> 
<td>east</td> 
</tr> 

<tr height="1%"> 
<td></td> 
<td style="vertical-align:middle">south</td> 
<td></td> 
</tr> 

</tbody> 

</table> 

</div> 

</body> 
</html>

来源

2012-01-05 18:29:19

-1基于表格的布局应该是最后的选择。 – 2012-01-08 17:52:42

@Blowski你能否详细说明你的评论，我没有得到你。 – 2012-01-09 03:38:25

这是一个基于表格的布局，因为它使用表格来定位页面上的内容。只要有可能，你应该使用基于CSS的布局，HTML只是描述内容而不是位置。在这里可能会出现一些JavaScript的情况。这里有一篇很好的文章，详细说明了原因 - http://www.chromaticsites.com/blog/13-reasons-why-css-is-superior-to-tables-in-website-design/ – 2012-01-09 07:13:29

如何使用CSS/HTML将组件推送到可用空间的边缘？

回答

相关问题