这里要注意的关键是页脚的高度不会被修复,但会随内容而变化.
当我说"粘性页脚"时,我按照我的理解使用它是"一个从不高于视口底部的页脚的常见定义,但是如果有足够的内容,它将被隐藏直到用户滚动远远看不到它."
另请注意,我不需要支持旧版浏览器.如果CSS display: table和相关属性在这里有帮助,那么它们就是公平游戏.
我从这个问题中学到了如何使HTML元素填充容器的剩余高度.但它似乎没有合作<textarea>.这个小提琴比较display: table-rowa <textarea>和a 的效果<div>:
为什么不同,我怎样才能在textarea上获得适当的效果？
我正在尝试构建一个布局,允许灵活的高度页眉和页脚,中间的一个部分消耗剩余的空间.中间的任何溢出都应该为这个中间部分提供一个滚动条.
我所拥有的适用于Safari和Chrome的代码是:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.l-fit-height {
display: table;
height: 100%;
}
.l-fit-height > * {
display: table-row;
height: 1px;
background-color: red;
}
.l-fit-height-expanded {
height: auto;
background-color: blue;
display: table-row;
}
.l-scroll-content {
height: 100%;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="l-fit-height">
<section>
Header
</section>
<section class="l-fit-height-expanded">
<div class="l-scroll-content">
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
</div>
</section> …这让我发疯了......我正在http://one29090testvdscom.accounts.combell.net/nl上构建页面.这是一个页面,包含标题,左侧菜单,内容和页脚.宽度固定为960px,水平居中.这一切都有效.但是,如果内容中的文字很少,我希望灰色内容区域始终采用可用的屏幕高度,以便页脚在页面下方.
该页面看起来像:
<body>
<!-- Centered container that contains site -->
<div id="centeredcontainer">
<!-- Area with header -->
<div id="header">
header here
</div>
<!-- Area that contains main menu on the left and content on the right -->
<div id="mainmenuandcontent">
<!-- Main menu on the left -->
<div id="mainmenu">
main menu here
</div>
<!-- Content on the right -->
<div id="content">
body here
</div>
<!-- Clears the floats so that next elements can use margins normally -->
<div class="clearer"></div> …