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

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

html css

Html CSS内容包装器-拉伸到可用高度,html,css,Html,Css,我的HTML文档结构如下： <body> <header></header> <main class="page-main"> <div> <aside></aside> <div class="page-content"></div> </div> </m

我的HTML文档结构如下：

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

在台式机上，一切看起来都很好，但在移动设备上，如果“main”标签的内容太短，它不会占据所有可用的高度，并且会有一个空白

将“页面主页面”高度拉伸到所有可用高度的最佳方法是什么

UPD1

请注意，我使用最小高度作为“body”标签，并将其设置为100%。若我为body定义“height”属性并将其设置为100%，则会出现内容过长的问题（见下图）

UPD2

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

我的目标是使“aside”元素拉伸到其父元素的所有可用高度。我想知道我的当前布局是否可行

html{margin:0px；padding:0px；height:100%；}
正文{边距：0px；背景颜色：粉红色；最小高度：100%；位置：相对；}
标题{背景色：红色；文本对齐：居中；}
主{高度：100%；填充底部：100px；}
页脚{位置：绝对；高度：100px；背景颜色：黑色；宽度：100%；底部：0px；颜色：白色；文本对齐：中心}
旁白{浮动：左；宽度：100px；右边框：3px#008000实心；}
.页面内容{float:left；}


校长1


校长2

项目1
项目2
项目3
项目4

Lorem ipsum dolor-sit fdgk；ldgk；ldfkg；krtj kljgf；oitrji ojfglkh；j l；gfhj io
我的页脚

如果你的main除了body之外没有其他父对象就这样包装它^

此外，如果你对100%的家长黑客感到厌烦，那么选择

100vh
也
如果您的内容将延伸超过100%的高度（这是不明确的），您可以将内容包装在另一个div中，并使用名为say的类。content并添加以下jquery：
$(document).ready(function() {
  $('.page-main').height($('.content').height());
});

这将仅在内容超过100%时更新div的高度，如果内容不超过100%，则返回到100%

或者，如果您不想使用jquery，可以使用flexbox、CSS绝对定位或通过JavaScript来实现。既然你提供了CSS，我将给你我的CSS版本。我看你用的是身高：100%；在主体和html上，因此您需要指定包含div的高度（根据您的示例）：
假设放在一旁就是你的盒子阴影所在
但是，这可能会导致问题。您的页脚是位置：绝对和底部：0而其他一切都不是绝对的。所以你可能会在这里发现一些重叠。这也可以解释你的差距。实际上，您应该删除这些样式
[更新：JavaScript解决方案]
从页脚中删除position:absolute，在这种情况下，这将导致内容重叠，特别是在响应性方面。这将消除内容和页脚之间的差距问题
一个新的问题将出现，页脚将不再位于页面底部，除非内容延伸超过屏幕高度。因此，我们需要使用JavaScript动态地向下推送主要内容。我将在反弹跳器函数中包装它，以便它在调整大小时工作：
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);

函数去盎司（func，wait，immediate）{
var超时；
返回函数（）{
var context=this，args=arguments；
var later=function（）{
超时=空；
如果（！immediate）函数应用（上下文，参数）；
};
var callNow=立即&&！超时；
clearTimeout（超时）；
超时=设置超时（稍后，等待）；
if（callNow）funct.apply（上下文，参数）；
};
}; 
//给你的元素ID让它工作
var pushContent=debounce（函数（）{
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

这应该可以在加载和调整大小时使用去抖动器来保持浏览器的效率。然后，它将计算高度并尝试推动主容器高度，以始终保持页脚在屏幕底部。让我知道这是否有效，我还没有测试它。
通过使用CSSdisplay
属性来模拟表行为，您可能可以得到您想要的东西

html{margin:0px；padding:0px；height:100%；}
正文{显示：表格；边距：0px；背景色：粉红色；宽度：100%；高度：100%；}
标题{显示：表格行；背景颜色：红色；文本对齐：居中；}
主{显示：表格行；高度：100%；}
页脚{显示：表格行；高度：100px；背景色：黑色；颜色：白色；文本对齐：中间}
旁边{显示：表格单元格；宽度：100px；右边框：3px#008000实心；}
.wrapper{显示：表格；宽度：100%；高度：100%；}
.page内容{显示：表格单元格；}

校长1


校长2

项目1
项目2
项目3
项目4

Lorem ipsum dolor-sit fdgk；ldgk；ldfkg；krtj kljgf；oitrji ojfglkh；j l；gfhj io
我的页脚我们看不到您的完整代码，甚至连页面主css都看不到。因此，您可能需要做的就是将其高度设置为100%。移动窗口是垂直的，所以你可以
$(document).ready(function() {
  $('.page-main').height($('.content').height());
});

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

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);