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％的高度和怪異的問題

回答

相關問題