Html 100%的身高和奇怪的问题

因此，我已经回顾了以下过去的问题，但我仍然不明白为什么会发生这种情况：

这是我的JSFIDLE：

CSS

body {
    background-color:#ccc;
    height:100%;
    overflow:hidden;
}

div {
    display:block;
    position:relative;
}

html {
    background-color:#f00;
    height:100%;
    overflow:hidden;
}

.uslt-wrapper {
    height:100%;
    overflow:auto;
    width:100%;
}
.uslt-content {
    background-color:#00f;
    height:100%;
    margin:0px auto;
    width:90%;
}

.uslt-footer, .uslt-header {
    background-color:#24427c;
    height:68px;
    width:100%;
}

.uslt-logo {
    color:#fff;
    height:68px;
    margin:0px auto;
    width:230px;
}

HTML

<div class="uslt-wrapper">
    <div class="uslt-header">
        <div class="uslt-logo">
            <h1>Logo</h1>
        </div>
    </div>
    <div class="uslt-content">
    </div>
    <div class="uslt-footer">
        <div class="uslt-logo">
            <h2>Logo</h2>
        </div>
    </div>
</div>

标志
标志

我正在尝试实现（没有HTML5/CSS3）一些东西，如果窗口对于页面来说太大，中间区域将扩展以占用额外的空间

---

但是我遇到了一个问题，无论窗口大小如何，我都会得到滚动条，即使目前没有内容，只有CSS样式。（请注意jsfiddle链接有CSS重置）

您的类，

uslt content

，继承了具有视口高度的

元素的100%高度。因此，

.uslt包装器

会溢出

一种可能的解决方案-让页眉和页脚在内容（）上方重叠：

---

您有：uslt内容（100%高度）+页眉（非零高度）+页脚（也非零高度）>100%这可能会有所帮助：我删除了uslt内容中的高度和溢出，但现在列不会延伸到底部。是否希望页脚在有足够内容导致滚动条时可见？或者在这种情况下，页脚应该被推到折叠下面吗？如果内容太长，我希望页脚被推到折叠下面。但是，是的，如果太短，就不能在底部显示页脚。问题是.uslt content+.uslt footer+.uslt header的高度为100%+136px。边距将偏移此值，但如果添加内容，前68个像素将显示在页眉下（最后68个像素显示在页脚下）。如果您要添加填充以抵消此影响，则总高度将再次大于100%，因此要正确执行此操作，您需要在.ustl content中添加一个元素，并为该元素添加css

margin:68px 0。看见你能把它加到答案上吗？太棒了！这是可行的，但唯一的问题是，如果uslt innercontent太大，它会放在页脚下。您需要设置
min height:100%
，而不是
height:100%
。如果有太多的内容，这将允许框增长，现在是我的问题的第二步-我试图在uslt innercontent中放置列，并希望它们也向下延伸。@Chris我不确定如何使其正常工作。要获得全高的列，所有父元素都需要绝对高度，但这会弄乱布局。此外，我不确定浮动元素是否可以继承其父元素的高度。我建议为此提出一个新问题。
.uslt-content {
    background-color:#00f;
    height:100%;
    margin: -68px auto;
    width:90%;
}

.uslt-footer, .uslt-header {
    background-color:#24427c;
    height:68px;
    width:100%;
    position: relative;
    z-index: 1;
}