如何使用CSS制作此页眉/内容/页脚布局？
| Header |
|______________________|
| |
| |
| Content |
| |
| |
|______________________|
| Footer |
|______________________|
我想制作这个UI，每个都是div。标头高度为30像素。页脚为30px。但是我不知道内容的高度。我需要使用用户框架进行计算。
总高度应为100％。
我可以用纯CSS做到吗？
问题答案：
使用flexbox，这很容易实现。
将包含3个隔层的包装器display: flex;的高度设置为100%或100vh。包装器的高度将填满整个高度，这display: flex;将使该包装器的所有子级具有适当的flex-properties（例如flex:1;），由flexbox-magic控制。
标记示例：
<div class="wrapper">
<header>I'm a 30px tall header</header>
<main>I'm the main-content filling the void!</main>
<footer>I'm a 30px tall footer</footer>
</div>
和CSS一起：
.wrapper {
height: 100vh;
display: flex;
/* Direction of the items, can be row or column */
flex-direction: column;
}
header,
footer {
height: 30px;
}
main {
flex: 1;
}
-[下面的旧答案]-
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Layout</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
header {
height: 30px;
background: green;
}
footer {
height: 30px;
background: red;
}
</style>
</head>
<body>
<header>
<h1>I am a header</h1>
</header>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor.
</p>
</article>
<footer>
<h4>I am a footer</h4>
</footer>
</body>
</html>
适用于所有现代浏览器（FF4 +，Chrome，Safari，IE8和IE9 +）
-
我正在用CSS来创建具有固定页眉和页脚以及可滚动内容的可滚动“窗口”。这里被接受的答案是我已经得出的最接近解决这个问题的答案，但这需要设置“内容”类div的高度。 我的目标是：1。如果内容小于机身高度，则不滚动2。如果内容长于正文高度减去页眉和页脚，则滚动。 如何实现这一点？
-
我有一个主报告和一个子报告，即main.jrxml和sub.jrxml，但存在以下问题： 在第二页上，当前页码不递增 在第二页及以后，标题和页眉没有完全删除 最后一页缺少免责声明和页码 在Jasper Studio中，并不总是为子报表重新生成 .Jasper文件，如何确保这是默认情况下总是重新生成的 对于TextField上的页码，我使用： msg（“第{0}页，共{1}页”，$V{V_CURRE
-
问题内容： 我正在尝试创建一个包含三个div的页面：页眉，页脚和内容区域。这些应该占据屏幕的100％。 页眉和页脚很小，不会改变，内容区域可以是任何大小，因此我添加了使其变大时滚动的功能。 我正在使用以下CSS设置html和正文高度，因此容器上的技巧将起作用： 我的文档结构为： 问题答案： 方法1-Flexbox 它适用于已知和未知的高度元素。确保设置外股利和重置默认的。 方法2-CSS表 对于已
-
我将页眉和页脚设置为Position：Fixed。但如果是可滚动的内容，则文本将转到页眉/页脚区域：下面是我的完整代码:http://jsfidle.net/kaqz1km2/6/ 在这种情况下，我不想使用background-image或background-color。 下面是CSS： null null
-
问题内容： 我正在使用iText 5创建pdf，并希望添加页脚。我所做的一切都像第14章中的“ iText in action”一书中所述。 没有错误，但没有显示页脚。有人可以告诉我我在做什么错吗？ 我的代码： 问题答案： 您报告的问题无法重现。我以您的示例为例，并使用此事件创建了TextFooter示例： 请注意，我只创建了一次和实例，从而提高了性能。我还介绍了页脚和页眉。您声称要添加页脚，但实
-
也许以前有人问过这个问题，但我似乎找不到一个准确的答案或解决办法。我开始使用RecycerView，并使用LinearLayoutManager实现了它。现在，我想添加自定义的页眉和页脚项，这些项不同于RecycerView中的其他项。页眉和页脚不应该粘，我希望他们滚动与其余的项目。有人能指出一些例子如何做到这一点或只是分享想法。我会非常感激的。THX