在内容容器上设置最小高度 [英] Set a min-height on content container
问题描述
我有一个案例，我没有看到解决方案。这是我的问题：
我有一个页面有三个部分（页眉，页眉和页脚）页脚必须一直刷新到底部。区段部分应该包含页眉和页脚之间的所有可用位置，但必须具有根据页面不同的最小高度（我将在CSS上手动设置）。
当达到最小高度时，整个页面上的滚动应该可用。
这里是我用来设置我的头的代码示例
$ b
> body {
margin：0
}
标题，节，页脚{
left：0;
right：0;
overflow：hidden;
position：absolute;
}
header {
height：70px;
top：0;
background-color：green;
}
section {
top：70px;
bottom：195px;
background-color：gray;
min-height：300px;
}
article {
overflow：hidden;
background-color：lightyellow;
}
.news {
position：absolute;
bottom：-30px;
width：100％;
background-color：lime;
}
footer {
height：195px;
bottom：0;
background-color：pink;
}
HTML
< header>
< div class =container>
< h2>我的标题< / h2>
< / div>
< / header>
< section>
< article>
< div class =news>
< div class =row-fluid>
< a href =＃> UP< / a>
< / div>
< div class =row-fluid>
< div class =container>
< div class =span6>新闻1< / div>
< div class =span6>新闻2< / div>
< / div>
< / div>
< / div>
< / article>
< / section>
< footer>
< div class =container>
我的页脚
< / div>
< / footer>
一个jsfiddle可用于示例： http://jsfiddle.net/Nk6uY/
编辑
如何在我的部分添加一个最小高度，当它到达我在窗户上有一个滚动条？
编辑2
我将添加更多关于我的问题的信息。首先，大部分我的内容里面的section标签都会被设置为绝对。并隐藏一些并出现在行动（大多是javascript）。因为这个原因，我知道每个部分是最小的高度，我需要看到我的内容，如果有人点击链接。
对于我的例子，div新闻是隐藏的，当你点击它将需要至少360px是可见的。但是如果我的窗口小于这个，我没有在窗口上滚动，所有我的内容被页脚覆盖。
p>您只能通过javascript来实现这一点 - 您需要提供您的页眉，页眉和页脚ids，然后使用像这样：
function ResizeBody（）{
var header = document.getElementById（Header）;
var section = document.getElementById（Section）;
var footer = document.getElementById（Footer）;
var height = GetBodyHeight（） - header.offsetHeight - footer.offsetHeight - anyPaddingToTopOrBottomOfThreeMainSections;
if（height> 0）{
body.style.height = height +px;
}
}
函数GetBodyHeight（）{
if（window.innerHeight> 0）{
return window.innerHeight;
}
else {
return document.documentElement.clientHeight;
}
}
window.onresize = function（）{
ResizeBody（）;
};
$（document）.ready（function（）{
ResizeBody（）;
}）;
UPDATE
对不起，我想我读错了问题 - 你想要的部分增长到屏幕尺寸，或者你手动设置它，如果有太多的内容有滚动条？
在这种情况下，你应该只设置部分的高度（而不是最小高度），而不是overflow：hidden use overflow：scroll;
I've a case where I don't see the solution. Here is my problem :
I've a page with three sections (header, section and footer) footer must flush to the bottom all the time. And the section part should take all available place between header and footer, but must have a min-height that is different according the page (I'll set it manually on CSS).
When the min-height is reached, a scroll on the whole page should be available.
Here is the sample of code I'm using to set my header, section and footer taking all the available place.
CSS
body {
margin: 0
}
header, section, footer {
left:0;
right:0;
overflow: hidden;
position: absolute;
}
header {
height: 70px;
top: 0;
background-color: green;
}
section {
top: 70px;
bottom: 195px;
background-color: gray;
min-height:300px;
}
article {
overflow: hidden;
background-color:lightyellow;
}
.news {
position: absolute;
bottom: -30px;
width: 100%;
background-color: lime;
}
footer {
height: 195px;
bottom: 0;
background-color: pink;
}
HTML
<header>
<div class="container">
<h2>My header</h2>
</div>
</header>
<section>
<article>
<div class="news">
<div class="row-fluid">
<a href="#">UP</a>
</div>
<div class="row-fluid">
<div class="container">
<div class="span6">News 1</div>
<div class="span6">News 2</div>
</div>
</div>
</div>
</article>
</section>
<footer>
<div class="container">
My footer
</div>
</footer>
A jsfiddle is available for the example : http://jsfiddle.net/Nk6uY/
Edit
How I can add a min-height on my section that when it's reached I get a scroll bar on my windows ?
Edit 2
I will add more informations about my problem. First, mostly of my content inside the section tag will be set in absolute. and hide somewhat and appear on actions (mostly javascript). For that reason, I know for each section which is the minimal height I need to see all my content if somebody click on the links.
For my example, the div news is hidden and when you click it will need at least 360px to be visible. But if my windows is smaller than this I don't have scrolls on the windows and all my content is covered by the footer.
You can only achieve this through javascript - you would need to give your header, section and footer ids and then use something like this:
function ResizeBody() {
var header = document.getElementById("Header");
var section = document.getElementById("Section");
var footer = document.getElementById("Footer");
var height = GetBodyHeight() - header.offsetHeight - footer.offsetHeight - anyPaddingToTopOrBottomOfThreeMainSections;
if (height > 0) {
body.style.height = height + "px";
}
}
function GetBodyHeight() {
if (window.innerHeight > 0) {
return window.innerHeight;
}
else {
return document.documentElement.clientHeight;
}
}
window.onresize = function () {
ResizeBody();
};
$(document).ready(function () {
ResizeBody();
});
UPDATE
Sorry, I think i read the question wrong - do you want the section to grow to the screen size or are you manually going to set it the if there is too much content have a scroll bar?
in which case you should just set the height (not as a min height) of the section and instead of overflow:hidden use overflow:scroll;
这篇关于在内容容器上设置最小高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
