多个div高度不同，怎么填充之间的空隙

Posted 2023-05-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多个div高度不同，怎么填充之间的空隙相关的知识，希望对你有一定的参考价值。

参考技术A 用js判断出来哪儿个高度最大，把最大值赋值给其他所有div的高度值
或者用css，，就是在所有div外面再套一个大的div包着，给他弄背景图，让他自适应里面的高度，制造假象，看似是各个div一样高，其实是下面的大div的背景延伸下来的参考技术B 一般都会在高度低的div下面放个广告图，然后广告图加div高度加间距和高度高的一致参考技术C 步图问题先吧小样修改好了然后在做

如何使用css使主要内容div填充屏幕的高度[重复]

【中文标题】如何使用css使主要内容div填充屏幕的高度[重复]【英文标题】：How to make the main content div fill height of screen with css [duplicate] 【发布时间】：2013-09-10 23:46:20 【问题描述】：

所以我有一个带有页眉、主体和页脚的网页。我希望主体填充 100% 的页面（在页脚和页眉之间填充 100%）我的页脚是绝对位置，底部：0。每次我尝试将主体设置为 100% 高度或更改位置或其他内容时，它也会溢出页眉。如果使用top: 40 将 body 设置为绝对位置（因为我的标题是 40px 高），它只会向下 40px 太远，创建一个滚动条。

我创建了一个简单的 html 文件，因为我实际上无法从实际项目中发布整个页面/css。使用示例代码，即使 maincontent 主体填满了屏幕，它也会向下移动 40px 太远（我假设是标题的原因）。

html,
body 
  margin: 0;
  padding: 0;


header 
  height: 40px;
  width: 100%;
  background-color: blue;


#maincontent 
  background-color: green;
  height: 100%;
  width: 100%;


footer 
  height: 40px;
  width: 100%;
  background-color: grey;
  position: absolute;
  bottom: 0;

<html>

<head>
  <title>test</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

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

  </div>

  <footer></footer>
</body>

</html>

有人知道答案吗？

【问题讨论】：

一切都非常广泛...你想要 ie5.5 for mac、ie6、ie7、ie8、ie9、当前浏览器（ie10、chrome、ff、opera、safari），还是什么？跨度> 请注意：避免网站主要部分（页眉、正文、页脚等）的绝对定位。在移动浏览器和旧浏览器上您会得到非常有趣的结果记住了:) 【参考方案1】：

不需要Javascript，不需要绝对定位，也不需要固定高度。

这是一个全 CSS / 仅 CSS 的方法，不需要固定高度或绝对定位：

/* Reset */

html,
body 
  height: 100%;
  margin: 0;
  padding: 0;



/* Essentials */

.container 
  display: table;


.content 
  display: table-row;
  height: 100%;


.content-body 
  display: table-cell;



/* Aesthetics */

.container 
  width: 100%;
  height: 100%;


.header,
.footer 
  padding: 10px 20px;
  background: #f7f7f7;


.content-body 
  padding: 20px;
  background: #e7e7e7;

<div class="container">
  <header class="header">
    <p>This is the header</p>
  </header>
  <section class="content">
    <div class="content-body">
      <p>This is the content.</p>
    </div>
  </section>
  <footer class="footer">
    <p>This is the footer.</p>
  </footer>
</div>

这种方法的好处是页脚和页眉可以增长以匹配它们的内容，并且正文会自动调整自己。您还可以选择使用 css 限制它们的高度。

【讨论】：

内容区获取滚动条失败：jsfiddle.net/AzLQY/517 @JunleLi 如果你想让它滚动你可以这样做：jsfiddle.net/geprhxxv/1 感谢您的回复。我想要一个具有可滚动主区域并且没有用于页眉和页脚的幻数的解决方案。我做了很多搜索并放弃。无论如何，非常感谢你！您的解决方案令人鼓舞！ :) @JunleLi 这个解决方案没有神奇的数字。所以听起来这就是你要找的，还是你的意思？嗨，@Mark。这是一个不错的方法。但它不适用于 IE。 :( 感谢您的帮助！【参考方案2】：

这些不是必须的

以 % 为单位移除高度移除 jQuery

使用底部和顶部拉伸 div：

.mainbody
    position: absolute;
    top: 40px; /* Header Height */
    bottom: 20px; /* Footer Height */
    width: 100%;

检查我的代码：http://jsfiddle.net/aslancods/mW9WF/

或在这里查看：

body 
    margin:0;


.header 
    height: 40px;
    background-color: red;


.mainBody 
    background-color: yellow;
    position: absolute;
    top: 40px;
    bottom: 20px;
    width:100%;


.content 
    color:#fff;


.footer 
    height: 20px;
    background-color: blue;
    
    position: absolute;
    bottom: 0;
    width:100%;

<div class="header" >
    &nbsp;
</div>
<div class="mainBody">
    &nbsp;
    <div class="content" >Hello world</div>
</div>
<div class="footer">
    &nbsp;
</div>

【讨论】：

页眉和正文 -> 是位置：静态，mainBody 和页脚 -> 位置：绝对。正确的？你有没有检查并遵循我的代码，来自 jsFiddle ？我忘了我还有 height: 100%，当我把它改成 auto 时它起作用了 :) 此解决方案只有在您知道页眉和页脚大小的情况下才能正常工作。如果您需要它独立于页眉和页脚的高度工作，请查看@Mark Murphy 的解决方案。 @sudhnk 尝试添加更多内容，然后滚动出现问题。 jsfiddle.net/sgs7yog0 这个解决方案有问题。内容超出页脚并且页脚向上滚动。尝试在提供的 jsfiddle 链接中添加一堆内容。下面的解决方案效果很好。在 chrome 和 safari 上试过。【参考方案3】：

此题与Make a div fill the height of the remaining screen space 重复，正确答案是使用flexbox 模型。

所有主流浏览器和 IE11+ 都支持 Flexbox。对于 IE 10 或更早版本，或者 Android 4.3 或更早版本，您可以使用FlexieJS shim。

请注意标记和 CSS 的简单程度。没有桌子黑客或任何东西。

html, body 
  height: 100%;
  margin: 0; padding: 0;  /* to avoid scrollbars */


#wrapper 
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */


#header 
  background: yellow;
  height: 100px;  /* can be variable as well */


#body 
  flex: 1;
  border: 1px solid orange;


#footer
  background: lime;

<div id="wrapper">
  <div id="header">Title</div>
  <div id="body">Body</div>
  <div id="footer">
    Footer<br/>
    of<br/>
    variable<br/>
    height<br/>
  </div>
</div>

在上面的 CSS 中，flex 属性简写了flex-grow、flex-shrink 和flex-basis 属性，以建立弹性项目的灵活性。 Mozilla 有一个good introduction to the flexible boxes model。

【讨论】：

对flex 属性的支持仍然是extremely limited.。当然，将其发布为答案，但不要太嚣张，告诉（要求）其他人删除他们的答案，因为你的答案“更好”。 @Cerbrus：对于所有常青浏览器和 IE11+，什么是“极其有限”的？我还提到了 FlexieJS 垫片。我不在乎“我的”是否更好，正如在您可能从这里得到的问题中宣传 Pebbl 的回答所证明的那样。 @ArunPrasadES：因为它是这个问题的现代解决方案。【参考方案4】：

有一个称为视口高度/视口宽度的 CSS 单元。

例子

.mainbodyheight: 100vh; 类似html,bodywidth: 100vw;

或 90vh = 视口高度的 90%。

**IE9+ 和大多数现代浏览器。

【讨论】：

这是一个很好的解决方案，但并非所有现代浏览器都支持 vh，例如iOS 7.1 safari 和 android chrome 我发现移动浏览器上的 vh 单元存在问题。 URL 栏似乎被计算为整个 vh。因此，当您滚动并且 URL 栏崩溃时，这似乎是一个小故障，并且该站点会尝试重新计算。只是演示明智，它很弱。有人有解决方案吗？这给了元素屏幕的大小，但不保证它会真正填满屏幕——或者完全在屏幕上。【参考方案5】：

相对值：height:100% 将使用 HTML 中的父元素作为参考，要使用高度中的相对值，您需要使 html 和 body 标签具有 100% 的高度：

HTML

<body>
    <div class='content'></div>
</body>

CSS

html, body

    height: 100%;


.content

    background: red;
    width: 100%;
    height: 100%;

http://jsfiddle.net/u91Lav16/1/

【讨论】：

【参考方案6】：

这允许我的表单以最小宽度居中的内容主体不会折叠：

html 
    overflow-y: scroll;
    height: 100%;
    margin: 0px auto;
    padding: 0;


body 
    height: 100%;
    margin: 0px auto;
    max-width: 960px;
    min-width: 750px;
    padding: 0;

div#footer 
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;


div#wrapper 
    height: auto !important;
    min-height: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;


div#pageContent 
    padding-bottom: 60px;


div#header 
    width: 100%;

我的布局页面看起来像：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <title></title>
</head>
<body>
<div id="wrapper">
        <div id="header"></div>
        <div id="pageContent"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

此处示例：http://data.nwtresearch.com/

另外请注意，如果您想要像您添加的代码一样的完整页面背景，请从包装器 div 中删除 height: auto !important;：http://jsfiddle.net/mdares/a8VVw/

【讨论】：

【参考方案7】：

嗯，不同的浏览器有不同的实现。

在我看来，最简单、最优雅的解决方案是使用 CSS calc()。不幸的是，这个方法在ie8及更低版本中不可用，在android浏览器和移动opera中也不可用。但是，如果您为此使用单独的方法，则可以尝试以下操作：http://jsfiddle.net/uRskD/

标记：

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

还有 CSS：

html, body 
    height: 100%;
    margin: 0;

#header 
    background: #f0f;
    height: 20px;

#footer 
    background: #f0f;
    height: 20px;

#body 
    background: #0f0;
    min-height: calc(100% - 40px);

我的次要解决方案涉及粘性页脚方法和框大小。这基本上允许 body 元素填充其父元素的 100% 高度，并使用box-sizing: border-box; 在该 100% 中包含填充。 http://jsfiddle.net/uRskD/1/

html, body 
    height: 100%;
    margin: 0;

#header 
    background: #f0f;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

#footer 
    background: #f0f;
    height: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

#body 
    background: #0f0;
    min-height: 100%;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;

我的第三种方法是使用 jQuery 设置主要内容区域的最小高度。 http://jsfiddle.net/uRskD/2/

html, body 
    height: 100%;
    margin: 0;

#header 
    background: #f0f;
    height: 20px;

#footer 
    background: #f0f;
    height: 20px;

#body 
    background: #0f0;

还有 JS：

$(function() 
    headerHeight = $('#header').height();
    footerHeight = $('#footer').height();
    windowHeight = $(window).height();
   $('#body').css('min-height', windowHeight - headerHeight - footerHeight);
);

【讨论】：

@Torr3nt 也缺乏跨浏览器支持，特别是旧浏览器和移动浏览器【参考方案8】：

使用没有定义高度的top: 40px 和bottom: 40px（假设您的页脚也是40px），您可以让它工作。

.header 
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    background-color:red;

.mainBody 
    width: 100%;
    top: 40px;
    bottom: 40px;
    position: absolute;
    background-color: gray;

.footer 
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    background-color: blue;

JSFiddle

【讨论】：

-1 为？这工作正常。我想可能是因为他的页眉和页脚有固定的高度。页脚和页眉的固定高度是的，所以 10% 的“从顶部”在缩放时不起作用。现在检查一下，它适用于固定高度的页眉和页脚。不会随内容展开。【参考方案9】：

虽然这听起来像是一个简单的问题，但实际上并非如此！

我已经尝试了很多方法来实现您想要使用纯 CSS 实现的目标，但我所有的尝试都失败了。但是.. 如果您使用 javascript 或 jquery，有一个可能的解决方案！

假设你有这个 CSS：

#myheader 
    width: 100%;

#mybody 
    width: 100%;

#myfooter 
    width: 100%;

假设你有这个 HTML：

<div id="myheader">HEADER</div>
<div id="mybody">BODY</div>
<div id="myfooter">FOOTER</div>

用 jquery 试试这个：

<script>
    $(document).ready(function() 
        var windowHeight = $(window).height();/* get the browser visible height on screen */
        var headerHeight = $('#myheader').height();/* get the header visible height on screen */
        var bodyHeight = $('#mybody').height();/* get the body visible height on screen */
        var footerHeight = $('#myfooter').height();/* get the footer visible height on screen */
        var newBodyHeight = windowHeight - headerHeight - footerHeight;
        if(newBodyHeight > 0 && newBodyHeight > bodyHeight) 
            $('#mybody').height(newBodyHeight);
        
    );
</script>

注意：我没有在这个解决方案中使用绝对定位，因为它在移动浏览器中可能看起来很难看

【讨论】：

【参考方案10】：

不知道你到底想要什么，但我想我明白了。

标题 - 停留在屏幕顶部？页脚 - 停留在屏幕底部？内容区域 -> 适合页脚和页眉之间的空间？

您可以通过绝对定位或固定定位来做到这一点。

这里是一个绝对定位的例子：http://jsfiddle.net/FMYXY/1/

标记：

<div class="header">Header</div>
<div class="mainbody">Main Body</div>
<div class="footer">Footer</div>

CSS：

.header outline:1px solid red; height: 40px; position:absolute; top:0px; width:100%;
.mainbody outline:1px solid green; min-height:200px; position:absolute; top:40px; width:100%; height:90%;
.footer outline:1px solid blue; height:20px; position:absolute; height:25px;bottom:0; width:100%;

为了使其发挥最佳效果，我建议使用 % 而不是像素，因为您会遇到不同屏幕/设备尺寸的问题。

【讨论】：

以上是关于多个div高度不同，怎么填充之间的空隙的主要内容，如果未能解决你的问题，请参考以下文章

div和div之间的空隙如何设置

使用 flex 使内部 div 填充剩余高度 [重复]

div 布局大框架宽度高度根据啥设置不同的浏览器怎么设？

如何用js根据屏幕高度控制div高度

如何让两个div高度能够一样高，不会因为其中一个div内容变多，导致两个div高度不同，怎么解决，如下图：

让一个 div 填充剩余屏幕空间的高度