Question

我有以下HTML文档结构：

<body>
    <header></header>
    <main class="page-main">
         <div>
              <aside></aside>
              <div class="page-content"></div>
         </div>
    </main>
    <footer class="page-footer"></footer>
</body>

以下是基本的css规则：

html {
  height: 100%;
  width: 100%;
  position: relative;
}

body {
  padding-bottom: 256px;
  width: 100%;
  min-width: 1124px;
  min-height: 100%;
  position: relative;
}

.page-main {
    height: 100%;
}

.page-footer {
    position: absolute;
    background-color: #3D3D3D;
    bottom: 0;
    width: 100%;
    height: 256px;
 }

在台式机上，一切看起来都不错，但在移动设备上，如果内容为＆＃34; main＆＃34;标签太短，它没有占用所有可用的高度，并且有一个空白区域。

拉伸＆＃34; page-main＆＃34;的最佳方式是什么？高度到所有可用高度？

UPD1

请注意，我使用min-height作为＆＃34; body＆＃34;标记并将其设置为100％。如果我定义＆＃34;身高＆＃34;身体的属性并将其设置为100％ - 出现长内容的问题（见下图）

UPD2

我创建了基本布局来解释我的问题：

我的目标是让＃34;放弃＆＃34;要拉伸到其父级的所有可用高度的元素。我想知道我现在的布局是否可以做到？

＆＃13;

  html{margin: 0px; padding: 0px; height: 100%;}
    body {margin: 0px;  background-color: pink; min-height: 100%; position: relative; }
    header {background-color: red; text-align: center;}
    main {height: 100%; padding-bottom: 100px;}
    footer {position: absolute; height: 100px; background-color: black; width: 100%; bottom: 0px; color: white; text-align: center}
    aside {float: left; width: 100px;  border-right: 3px #008000 solid; }
    .page-content {float: left;}

＆＃13;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <header>
        <div>Header1</div>
        <br>
        <div>Header2</div>
    </header>
    <main class="page-main">
        <div class="wrapper">
            <aside>
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                </ul>
            </aside>
            <div class="page-content"> Lorem ipsum dolor sit  fdgk ;ldgk ;ldfkg ;krtj kljgf ;oitrji ojfglkh;j l;gfhj io
            </div>
        </div>

    </main>
    <footer>MY FOOTER</footer>
</body>
</html>

＆＃13;

Answer 1

body, html, .page-main{
  height: 100%;
}

如果您的主除正文之外没有其他父作品，请将其包裹起来^

此外，如果您对100％的父母黑客感到无聊，请转到100vh;

也

如果您的内容将延伸超过100％的高度（这是不正常的），您可以将内的包装在另一个div中，并使用名为 .content 的类并添加这个jquery：

$(document).ready(function() { $('.page-main').height($('.content').height()); });

如果内容超过100％，则会更新div的高度，如果内容不超过100％，则会更新。

Codepen for you

或者，如果您不想使用jquery - 请使用flexbox Flexbox Complete Guide

Answer 2

2种方式，CSS绝对定位，或通过JavaScript。既然你提供了CSS我会给你我的CSS版本。我看到你正在使用身高：100％;在body和html上，所以你需要指定包含div的高度（根据你的例子）：

.page-main {
   height: 100%;
   position: relative;
}
aside {
  height:100%;
}

假设放在旁边是你的盒子阴影所在。

然而，这可能会导致问题。您的页脚是位置：绝对; 和底部：0; ，而其他所有内容都不是绝对的。所以你可能会发现这里有些重叠。这也将解释您所拥有的差距。真的，你应该删除这些样式。

[更新：JavaScript解决方案]

从页脚中删除位置：绝对，这会导致内容重叠，尤其是在响应性方面。这应该消除您在内容和页脚之间看到的间隙问题。

将出现一个新问题，除非内容超出屏幕高度，否则页脚将不再位于页面底部。因此，我们需要使用JavaScript来动态推送主要内容。我将它包装在de-bouncer函数中，以便它可以调整大小：

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}; 

// Give your elements IDs for this to work
var pushContent = debounce(function() {
    var header = document.getElementById('header');
    var main = document.getElementById('main');
    var footer = document.getElementById('footer');
    var winHeight = window.innerHeight;
    var contentHeight = header.outerHeight + main.outerHeight + footer.outerHeight;

    if (contentHeight < winHeight) {
       var h = winHeight - header.outerHeight - footer.outerHeight;
       main.setAttribute('style', 'height:' + h + 'px;')
    }

}, 250);

window.addEventListener('resize', pushContent);
window.addEventListener('onload', pushContent);

这应该适用于加载和使用去抖动调整大小以尝试提高浏览器效率。然后它将计算高度并尝试推动主容器高度，以始终将页脚保持在屏幕的底部。如果有效，请告诉我，我还没有测试过它。

Answer 3

您可以使用CSS display属性来模拟表行为，从而获得您所追求的内容......

html{margin: 0px; padding: 0px; height: 100%;}
body {display: table; margin: 0px; background-color: pink; width: 100%; height: 100%;}
header {display: table-row; background-color: red; text-align: center;}
main {display: table-row; height: 100%;}
footer {display: table-row; height: 100px; background-color: black; color: white; text-align: center}
aside {display: table-cell; width: 100px; border-right: 3px #008000 solid;}
.wrapper {display: table; width: 100%; height: 100%;}
.page-content {display: table-cell;}

<header>
  <div>Header1</div>
  <br>
  <div>Header2</div>
</header>
<main class="page-main">
  <div class="wrapper">
    <aside>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ul>
    </aside>
    <div class="page-content"> Lorem ipsum dolor sit  fdgk ;ldgk ;ldfkg ;krtj kljgf ;oitrji ojfglkh;j l;gfhj io
    </div>
  </div>
</main>
<footer>MY FOOTER</footer>

CSS内容包装器 - 拉伸到可用高度

3 个答案: