CSS3：如何将中间DIV设置为最大高度？_Css_Height_Scale

CSS3：如何将中间DIV设置为最大高度？

css

CSS3：如何将中间DIV设置为最大高度？,css,height,scale,Css,Height,Scale,我想在我的网页上使用三个区域：页眉、内容和页脚页脚应该贴在网页底部标题应该贴在页面顶部代码> 应该填满页面中间的整个区域。这就是基本布局： <body> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </body> 对于内容我使用的是背景图像，精确缩放到div元素的尺寸： #con

我想在我的网页上使用三个

区域：页眉、内容和页脚

页脚

应该贴在网页底部

标题

应该贴在页面顶部

<内容>代码> <代码>应该填满页面中间的整个区域。

这就是基本布局：

<body>
  <div id="header"></div>
  <div id="content"></div>
  <div id="footer"></div>
</body>

对于内容

我使用的是背景图像，精确缩放到

div

元素的尺寸：

#content
{
  background: url("Bilder/Bild.png") center contain no-repeat black;
}

现在，我希望内容

正好是页眉和页脚之间的视口的剩余高度，而不添加任何JavaScript，无论以后将什么内容添加到内容

如何在CSS3中执行此操作？

如果已知

页脚和页眉的大小，则可以使用。因此，假设两者同时使用100px
，这应该是可行的：
html, body { height: 100%; }
#content {
  height: calc( 100% - 100px );
}

不过，请注意，旧浏览器不支持此功能。另外，还可以查看可能需要的前缀
你可以用这样的东西。它将允许你在一系列决议中保持你的立场
#header {
    position: fixed;
    height: 10%;
}

#content {
    position: fixed;
    height: 80%;
    top: 10%;
}

#footer {
    position: fixed;
    bottom: 0px;
    height: 10%;
}

查看它谢谢您的帮助。因此，在计算完所有其他与高度相关的块的大小之后，实际上没有属性值来将高度设置为“适合”？在HTML4中，有一个星号属性值提供了这个特性。我刚刚试过你的例子。唯一的问题似乎是宽度。如果在#content div周围加上边框，它只会绕过文本。设置宽度：100%，但是，将右边框设置为较远的位置。你建议这里的宽度值是多少？这很有趣！但是没有一个值可以显式地将块的高度设置为“适合”吗？（很抱歉我的回复太晚。我似乎没有收到有关此线程的通知。）@AxD如果您在所有三个框上都使用百分比值，它也会起作用。但我想，页眉和页脚将有一些固定的高度，据我所知，这只留下这个解决方案。看起来很棒！但是，如果将边框添加到#content div，则底部边框似乎不会在其应该结束的位置结束。无论我在Firefox上使用的是哪种框大小模型，底部边框都不可见。你知道该怎么做吗？
#header {
    position: fixed;
    height: 10%;
}

#content {
    position: fixed;
    height: 80%;
    top: 10%;
}

#footer {
    position: fixed;
    bottom: 0px;
    height: 10%;
}