div具有基于浏览器窗口高度的动态最小高度

Question

我有三个div元素:一个作为标题,一个作为页脚,以及一个中心内容div.
将div在中心需要与内容自动扩展,但我想一个min-height,使得底部div总是至少到达窗口的底部,但在较长的网页是不是固定在那里.

例如:

<div id="a" style="height: 200px;">
  <p>This div should always remain at the top of the page content and should scroll with it.</p>
</div>
<div id="b">
  <p>This is the div in question. On longer pages, this div needs to behave normally (i.e. expand to fit the content and scroll with the entire page). On shorter pages, this div needs to expand beyond its content to a height such that div c will reach the bottom of the viewport, regardless of monitor resolution or window size.
</div>
<div id="c" style="height: 100px;">
  <p>This div needs to remain at the bottom of the page's content, and scroll with it on longer pages, but on shorter pages, needs to reach the bottom of the browser window, regardless of monitor resolution or window size.</p>
</div>

Answer 1

只是在jsfiddle上寻找我的解决方案,它基于csslayout

html,
body {
  margin: 0;
  padding: 0;
  height: 100%; /* needed for container min-height */
}
div#container {
  position: relative; /* needed for footer positioning*/
  height: auto !important; /* real browsers */
  min-height: 100%; /* real browsers */
}
div#header {
  padding: 1em;
  background: #efe;
}
div#content {
  /* padding:1em 1em 5em; *//* bottom padding for footer */
}
div#footer {
  position: absolute;
  width: 100%;
  bottom: 0; /* stick to bottom */
  background: #ddd;
}

<div id="container">

  <div id="header">header</div>

  <div id="content">
    content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
  </div>

  <div id="footer">
    footer
  </div>
</div>

Answer 2

我发现这是ryanfait.com的礼貌.它实际上非常简单.

为了在内容短于窗口高度时将页脚浮动到页面底部,或者当内容长于窗口高度时将内容浮动到页面底部,请使用以下代码:

基本的HTML结构:

<div id="content">
  Place your content here.
  <div id="push"></div>
</div>
<div id="footer">
  Place your footer information here.
</footer>

注意:除非绝对定位,否则不应将任何内容放在'#content'和'#footer'div之外.
注意:'#push'div中不应放置任何内容,因为它将被隐藏.

而CSS:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#content {
  min-height: 100%;
  height: auto !important; /*min-height hack*/
  height: 100%;            /*min-height hack*/
  margin-bottom: -4em;     /*Negates #push on longer pages*/
}
#footer, #push {
  height: 4em;
}

要使页眉或页脚跨越页面的宽度,您必须绝对定位页眉.
注意:如果添加页面宽度标题,我发现有必要在#content中添加一个额外的包装器div.外部div控制水平间距,而内部div控制垂直间距.我被要求这样做,因为我发现'min-height:'仅适用于元素的主体,并在高度上添加填充.

*编辑:缺少分号

Answer 3

如果#top并且#bottom有固定的高度,您可以使用:

#top {
    position: absolute;
    top: 0;
    height: 200px;
}
#bottom {
    position: absolute;
    bottom: 0;
    height: 100px;
}
#central {
    margin-top: 200px;
    margin-bot: 100px;
}

更新

如果你想#central伸展,你可以:

• 以父母为背景假冒;
• 使用CSS3(不太广泛支持,最有可能)calc();
• 或者也许使用javascript动态添加min-height.

用calc():

#central {
    min-height: calc(100% - 300px);
}

使用jQuery可能是这样的:

$(document).ready(function() {
  var desiredHeight = $("body").height() - $("top").height() - $("bot").height();
  $("#central").css("min-height", desiredHeight );
});

Answer 4

根据浏览器窗口获取动态高度。使用vh而不是%

例如：通过以下高度：100vh；到特定的div