我正在开发一个web应用程序,我希望内容能够填满整个屏幕的高度。

该页面有一个标题,其中包含徽标和帐户信息。这可以是任意高度。我希望contentdiv将页面的其余部分填充到底。

我有一个header div和一个content div。目前,我正在为布局使用一个表,如下所示:

CSS和HTML

#第页{高度:100%;宽度:100%}#td含量{高度:100%;}#内容{溢出:自动;/*或溢出:隐藏*/}<table id=“page”><tr><td id=“tdheader”><div id=“header”></分区></td></tr><tr><td id=“tdcontent”><div id=“content”></分区></td></tr></table>

页面的整个高度已填充,不需要滚动。

对于contentdiv中的任何内容,设置top:0;会把它放在标题下面。有时内容将是一个真实的表格,其高度设置为100%。将标题放在内容内不允许这样做。

有没有一种方法不使用桌子就能达到同样的效果?

更新:

contentdiv中的元素也将高度设置为百分比。因此,div中100%的内容将填充到底部。50%的两个元素也是如此。

更新2:

例如,如果标题占屏幕高度的20%,则在#内容内部指定50%的表将占屏幕空间的40%。到目前为止,把整个东西包在桌子里是唯一有效的方法。


当前回答

我找到了一个非常简单的解决方案,因为对我来说,这只是一个设计问题。我希望页面的其余部分不要在红色页脚下方为白色。所以我把页面的背景色设置为红色,而内容的背景色则设置为白色。当内容高度设置为例如20em或50%时,几乎为空的页面不会使整个页面变红。

其他回答

文森特,我会用你的新要求再次回答。因为你不在乎内容太长会被隐藏,所以你不需要浮动标题。只需将溢出隐藏在html和body标签上,并将#content-height设置为100%。内容将始终比视口长页眉的高度,但它将被隐藏,不会导致滚动条。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>

对我有效的方法(在另一个div中包含一个div,我假设在所有其他情况下)是将底部填充设置为100%。也就是说,将其添加到css/样式表中:

padding-bottom: 100%;

已使用:高度:计算(100vh-110px);

代码:.header{height:60px;top:0;背景色:绿色}.车身{高度:计算(100vh-110px)/*50+60*/背景色:灰色;}.footer{height:50px;bottom:0;}<div class=“header”><h2>我的页眉</h2></div><div class=“body”><p>身体</p></div><div class=“footer”>我的页脚</div>

试试这个

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

这是动态计算重新分配屏幕空间,最好使用Javascript。

您可以使用CSS-IN-JS技术,如下面的lib:

https://github.com/cssobj/cssobj

演示:https://cssobj.github.io/cssobj-demo/