100％的高度和怪异的问题

，所以我看过了下面的问题过去，我仍然想不通为什么发生这种情况：100％的高度和怪异的问题

XHTML HTML element with 100% height causing scrollbars

Body height 100% displaying vertical scrollbar

这里是我的jsfiddle ：http://jsfiddle.net/G4kgW/5/

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重置）

来源

2013-06-28 Chris

您有：USLT含量（100％的高度）+报头（非零高度）+页脚（也非零高度）> 100％ – mishik

这可能有所帮助：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page/ – Alp

我删除了高度和uslt-内容，但现在这些列不会延伸到底部。 – Chris

您的课程uslt-content继承了具有视口高度的<HTML>元素的高度的100％。所以.uslt-wrapper得到溢出。

可能的解决方案的一个 - 让报头和内容上方重叠页脚（jsFiddle Demo）：

.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; 
}

来源

2013-06-28 20:18:05

问题是.uslt-content + .uslt-footer + .uslt-header的高度为100％+ 136px。边距将抵消这一点，但如果您添加内容，头68个像素将显示在de标题下（以及尾标下的最后68个像素）。如果你想添加填充来解决这个问题，那么总高度会再次大于100％，所以为了正确地做到这一点，你需要在.ustl-content中添加一个元素，并为该元素添加CSS：margin：68px 0; '。看[这个jsfiddle]（http://jsfiddle.net/Sumurai8/QEVxC/）。你可以添加到答案？ – Sumurai8

真棒！这是有效的，但唯一的情况是，如果内容过于庞大，它会进入页脚。 – Chris

您需要设置'min-height：100％'而不是'height：100％'。这将允许盒子增长，如果有太多的内容 – Sumurai8

100％的高度和怪异的问题

回答

相关问题