Fatal编程技术网
  • html/
  • Html 使div填充剩余屏幕空间的高度

Html 使div填充剩余屏幕空间的高度

html css

Html 使div填充剩余屏幕空间的高度,html,css,html-table,Html,Css,Html Table,我正在开发一个web应用程序，希望内容能够填满整个屏幕的高度 该页面有一个标题，其中包含徽标和帐户信息。这可能是任意高度。我希望content div将页面的其余部分一直填充到底部 我有一个标题div和一个内容div。目前，我正在使用表格进行布局，如下所示： CSS和HTML #第页{ 高度：100%；宽度：100% } #TDC含量{ 身高：100%； } #内容{ 溢出：自动；/*或溢出：隐藏*/ } ... ... 试验 身体 ，html { 身高：100%； 保证金：0； 填充：0

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

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

我有一个标题
div
和一个内容
div
。目前，我正在使用表格进行布局，如下所示：

CSS和HTML

#第页{
高度：100%；宽度：100%
}
#TDC含量{
身高：100%；
}
#内容{
溢出：自动；/*或溢出：隐藏*/
}

...
...


试验
身体
，html
{
身高：100%；
保证金：0；
填充：0；
颜色：#FFF；
}
#标题
{
浮动：左；
宽度：100%；
背景：红色；
}
#内容
{
身高：100%；
溢出：自动；
背景：蓝色；
}
标题
标题材料

内容
内容材料
在所有理智的浏览器中，您可以将“header”div作为同级放在内容之前，同样的CSS也可以工作。但是，如果在这种情况下浮动为100%，IE7-无法正确解释高度，因此标题需要位于内容中，如上所述。溢出：自动将导致IE上出现双滚动条（始终显示视口滚动条，但已禁用），但如果没有它，内容将在溢出时被剪辑。

在CSS中确实没有一种声音、跨浏览器的方式来执行此操作。假设布局很复杂，则需要使用JavaScript设置元素的高度。您需要做的实质是：

Element Height = Viewport height - element.offset.top - desired bottom margin
一旦可以获得该值并设置元素的高度，就需要将事件处理程序附加到窗口onload和onresize，以便启动调整大小功能

另外，假设您的内容可能比视口大，则需要将overflow-y设置为滚动。

Vincent，我将使用您的新要求再次回答。由于您不关心内容太长时是否被隐藏，因此不需要浮动标题。只需将溢出隐藏在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>


试验
正文，html{
身高：100%；
保证金：0；
填充：0；
溢出：隐藏；
颜色：#FFF；
}
p{
保证金：0；
}
#标题{
背景：红色；
}
#内容{
位置：相对位置；
身高：100%；
背景：蓝色；
}
#内容#定位{
位置：绝对位置；
排名：0；
右：0；
}
标题
标题材料

内容
内容材料

定位内容
我也一直在寻找答案。如果您有幸能够以IE8及以上为目标，则可以使用
display:table
和相关值来获取具有块级元素（包括div）的表的呈现规则

如果您更幸运，并且您的用户正在使用顶级浏览器（例如，如果这是您控制的计算机上的intranet应用程序，就像我的最新项目一样），那么您可以在CSS3中使用新的浏览器

我为此绞尽脑汁，最后得出以下结论：

由于很容易将内容DIV设置为与父级相同的高度，但显然很难将其设置为父级高度减去页眉高度，因此我决定将内容DIV设置为全高，但绝对将其放置在左上角，然后为具有页眉高度的顶部定义一个填充。这样，内容将整齐地显示在标题下，并填充整个剩余空间：

正文{
填充：0；
保证金：0；
身高：100%；
溢出：隐藏；
}
#标题{
位置：绝对位置；
排名：0；
左：0；
高度：50px；
}
#内容{
位置：绝对位置；
排名：0；
左：0；
填充顶部：50px；
身高：100%；
}
对我有效的方法（在另一个div中有一个div，我假设在所有其他情况下）是将底部填充设置为100%。也就是说，将其添加到css/样式表中：

填充底部：100%；
原来的帖子是3年多以前写的。我想很多像我一样来到这篇文章的人都在寻找一个类似应用程序的布局解决方案，比如说一个固定的页眉、页脚和占据其余屏幕的全高内容。如果是这样，这篇文章可能会有所帮助，它可以在IE7+上工作，等等

下面是那篇文章的一些片段：

@媒体屏幕{
/*开始屏幕规则。*/
/*通用窗格规则*/
正文{页边距：0}
.row、.col{溢出：隐藏；位置：绝对；}
.行{左：0；右：0；}
.col{top:0；bottom:0；}
.scroll-x{overflow-x:auto；}
.scroll-y{overflow-y:auto；}
.header.row{高度：75px；顶部：0；}
.body.row{顶部：75px；底部：50px；}
.footer.row{高度：50px；底部：0；}
/*屏幕结束规则。*/
}

我的头球
身体

我的页脚

为什么不就这样


html，正文{
身高：100%；
}
#集装箱运输{
背景图片：url（'../img/edit_bg.jpg'）；
身高：40%；
}
#集装箱控制{
背景图片：url（'../img/control_bg.jpg'）；
身高：60%；
}


给html和body（按顺序）一个高度，然后给元素一个高度


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

<!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>



<body>    
    <div>hello </div>
    <div>there</div>
</body>



body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}



table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption } 



<div id="page">

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

</div>



height: calc(100% - 10px); // 10px is height of your first div...



div {
    height: 100vh;
}



<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>



body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}



<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>



.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}



       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }



<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>



<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}



 style="height:100vh"



html, body {
    height: 100%;
}



<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div>Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>



<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>