Question

我想要做的事情听起来非常简单，但由于某些原因我无法使其工作......我想要一个具有特定大小的块元素，它具有三个子块元素：标题，中心区域和页脚。它必须具有以下特征：

页眉和页脚只需要内容所需的高度。这个内容是动态的，所以我不能在这里使用固定大小。所以我们假设标题中的文本是本地化的。它可以是简短的英文文本（一行）或长法文（包含两行）。
中心区域占用所有其他空间。有了这个，我的意思是它真的占据了所有的空间而且它不仅仅位于中心的顶部。因此，如果中心元素具有背景颜色，则此颜色必须对于页眉和页脚之间的整个空间可见。或者，如果中心元素是图像，则必须将其拉伸到页眉和页脚之间的区域。
创建时所有尺寸都是未知的，因此使用绝对定位不起作用。同样使用中心元素上的常用边距技巧也不起作用，因为页眉/页脚的高度未知，因为它是动态的。
没有JavaScript黑客攻击。
必须在IE7 +，FF3 +，Chrome和Safari中使用。

让我们来看看这个示例代码：

<div style="width: 512px; height: 512px">
  <div class="head">This is the header</div>
  <div class="center">This is the center area</div>
  <div class="foot">This is the footer</div>
</div>

最后它应该是这样的：

+--------------------------+
| This is the header       |
+--------------------------+
| This is the center area  |
|                          |
|                          |
|                          |
|                          |
|                          |
+--------------------------+
| This is the footer       |
+--------------------------+

我该怎么做？即使有一个老式的桌子，并且对于中心单元使用height =“100％”，我也无法使它工作，因为桌子太大而在IE7中（中心区域是512px，所以桌子本身是512px加上高度页眉和页脚单元格。

我正在搜索的是一些用于制作上述HTML代码的CSS代码（或者任何替代HTML代码，甚至允许使用真正的HTML表格），如上所述并匹配上面列出的所有标准。

Answer 1

更新

这是另一个小提琴...... http://jsfiddle.net/zDfHs/

内容的高度不会达到100％，但您可以使用JavaScript更改内容。目前，我不知道如何通过纯CSS来实现这一目标。

我希望这会有所帮助赫里斯托斯

看看这个小提琴：http://jsfiddle.net/qrUAy/

马修詹姆斯泰勒的网站实际上非常好，他的布局绝对不是骗局:)但你有权利对你的意见。无论如何，这是简单的标题/内容/页脚布局......

http://matthewjamestaylor.com/blog/ultimate-1-column-full-page-pixels.htm

我希望这会有所帮助赫里斯托斯

Answer 2

如有必要，只需将表格的宽度设置为98％。

您没有发布CSS代码。您是否尝试设置head和foot类的高度？或者，只需让它们按内容大小。

结论：您的HTML看起来不错。（您描述的唯一问题涉及使用HTML的表格，您甚至没有发布。）您发布的HTML有什么问题？

Answer 3

您可以使用相对和绝对定位。使内容的浏览器窗口高度为100％;绝对将标题放在屏幕顶部;同样绝对将页脚放在页面底部;然后在内容<div>内的另一个<div>内设置margin-top与标题相同的高度，padding-bottom与页脚的高度相同。

您的HTML将是这样的：

<html>
  <head>
    ...
  </head>
  <body>
    <div id="container">
      <div id="header">
      </div>
      <div id="content">
        <div class="inner">
          <!-- place margins on this element -->
        </div>
      </div>
      <div id="footer">
      </div>
    </div>
  </body>
<html>

然后你的CSS：

html, body {
    height: 100%;
}
#container {
    position: relative;
    height: auto;
    max-height: 100%;
}
#content {
    position: absolute;
    height: auto;
    max-height: 100%;
}
#header {
    position: absolute;
    width: 100%;
    height: 150px;
    top: 0px;
    left: 0px;
}
#footer {
    position: absolute;
    width: 100%;
    height: 150px;
    left: 0px;
    bottom: 0px;
}
#content .inner {
    margin-top: 150px;
    margin-bottom: 150px;
}

这个是未经测试的，并且是袖手旁观的，因此可能需要进行一些调整，但这是前提。

此外，我更喜欢使用ID作为页眉，页脚，主要内容包装等元素，理论上只有页面上的每一个都是。

Answer 4

多余的我操作的例子有太多的标记。尝试：

<style>
.box {
    width: 512px; height: 512px;
    position:relative;
    border:1px solid black;
}

.head {
    background:white;
    border:1px solid red;
}

.foot {
    width:100%;
    background:white;
    position:absolute;
    bottom:0;
    border:1px solid blue;
}
</style>

<div class="box">
    <div class="head">This is the header</div>
    <p>The is the center area</p>
    <div class="foot">This is the footer</div>
</div>

Answer 5

修改为包含图像作为示例：

<style>
.box {
    width: 512px; height: 512px;
    background:url("http://www.desktops-wallpapers.com/Exports%20from%20Aperture/Trees/1280_1024/row_of_pine_trees.jpg");
    position:relative;
    border:1px solid black;
}

.head {
    background:white;
    border:1px solid red;
}

.foot {
    width:100%;
    background:white;
    position:absolute;
    bottom:0;
    z-index:2;
    border:1px solid blue;
}
</style>

<div class="box">
    <div class="head">This is the header</div>
    <p>The is the center area</p>
    <div class="foot">This is the footer</div>
</div>

Answer 6

我正在研究这个问题并发现这个链接描述了一个类似于你想要的东西的技巧。唯一不同的是，如果内容大于页面大小，则内容将滚动。不过，我发现它很有用，并且会为我的网页执行此操作。

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

body { margin: 0 }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }

.header.row { height: 122px; top: 0; background-color: red;}
.body.row { top: 122px; bottom: 24px; background-color: yellow;}
.footer.row { height: 24px; bottom: 0; background-color: green;}

</style>
</head>
<body>
<body>
    <div class="header row">
        <h2>My header</h2>
    </div>

    <div class="body row scroll-y">
        The body        
    </div>

    <div class="footer row">
        My footer
    </div>
</body>
</body>
</html>

如何创建简单的头/中心/脚布局？

6 个答案:

更新