站點最小高度100％

我正在構建一個網站，我希望其最小高度爲100％，因此如果網頁上沒有太多內容，頁腳將位於頁面底部。如果有更多的內容，它只會擴大。站點最小高度100％

我使用了一個以此爲例的網站，並將其更改爲我的需要。
起初它似乎工作得很好，但現在它顯示出兩個問題：
- 該網站似乎總是有點超過100％的高度;一小部分延伸到屏幕之外。
- 頁腳不顯示在底部，而是顯示在中間的某處，儘管設置了底部屬性。

這是標記：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<%@ Master Language="VB" CodeFile="Site.Master.vb" Inherits="Site" %> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head id="Head" runat="server"> 
     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     <title>Site (b&egrave;ta)</title> 
    </head> 
    <body> 
     <form id="form1" runat="server" autocomplete="off" class="formCss"> 
      <ajax:ToolkitScriptManager ID="Toolscriptmanager1" runat="server" EnableScriptGlobalization="true" EnableScriptLocalization="true"> 
       <Scripts> 
        <asp:ScriptReference Path="~/js/jquery-1.8.2.min.js" /> 
        <asp:ScriptReference Path="~/js/jquery.curvycorners.packed.js" /> 
        <asp:ScriptReference Path="~/js/Site.jquery.js" /> 
        <asp:ScriptReference Path="~/js/jquery.colorize-1.3.1.js" /> 
       </Scripts> 
      </ajax:ToolkitScriptManager> 
      <asp:Label ID="ContentTitle" runat="server" CssClass="content_title"></asp:Label> 
      <div id="container"> 
       <div id="headerContainer"> 
        <div id="header"> 
         <telerik:RadMenu ID="HoofdMenu" EnableEmbeddedSkins="false" Height="20px" EnableImageSprites="false" Font-Size="11px" runat="server" CollapseDelay="0" ExpandDelay="0" ClickToOpen="true" ExpandAnimation-Type="None" CollapseAnimation-Type="None" CausesValidation="false"></telerik:RadMenu> 
        </div> 
       </div> 

       <div id="content"> 
        <asp:ContentPlaceHolder ID="Content" runat="server"></asp:ContentPlaceHolder> 
       </div> 
       <div id="footer"> 
        This is the footer 
       </div> 
      </div> 
     </form> 
    </body> 
</html>

這是CSS：

html,body 
{ 
    margin:5px; 
    padding:0; 
    height:100%; /* needed for container min-height */ 
    font-family:tahoma; 
    font-size:11px; 
    color:#000000; 
    background-color: #8FB1B1; 
    /*background-image: url(../../Images/Afbeelding1.jpg);*/ 
} 

.formCss 
{ 
    height:100%; 
    min-height: 100%; 
} 

div#container 
{ 
    position:relative; /* needed for footer positioning*/ 
    margin:0 auto; /* center, not in IE5 */ 
    width:100%;  
    height:auto !important; /* real browsers */ 
    height:100%; /* IE6: treaded as min-height*/ 
    min-height:100%; /* real browsers */ 

    background-color: #FFFFFF; 
} 

div#headerContainer 
{ 
    background-color: #8FB1B1; 
} 
div#header 
{ 
    padding-left:5px; 
    padding-top: 12px; 
    height: 30px; 
    background-color: #1C2948; /*#833D62;*/ 
    z-index: 100; 
} 


div#content 
{ 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top:10px; 
    background-color: #FFFFFF; /* #E0E5D7; #FFFFFF;*/ 
    padding-bottom:25px; /* bottom padding for footer */ 

    /*filter:alpha(opacity=80); 
    -moz-opacity:0.80; 
    opacity:0.80; */ 

} 

div#footer 
{ 
    position:absolute; 
    height: 25px; 
    bottom:0; /* stick to bottom */ 
    background:#FFFFFF;  
    padding-left: 10px; 
}

我已經把代碼放在一個小提琴：http://jsfiddle.net/7uuD6/1
（它包含ASP.NET代碼的jsfiddle能遺憾的是）

我在做什麼錯？乾杯， CJ

來源

2013-05-14 CJ Scholten

你能去除心不是neceserry的代碼？所以我可以爲你植入 – DiederikEEn 2013-05-14 09:45:57

你已經搞亂了你的標記，所以現在'＃footer'在幾個有定位的父母身上，因此使它不起作用。閱讀CSS定位，特別是「相對」和「絕對」的工作方式。修復這是完全重寫。 – 2013-05-14 10:03:37

有，你可以用它來保持一個棘手的註腳兩個方法，它們依賴於瀏覽器的支持，雖然。

如果您不關心IE7或17之前的Firefox版本，則可以使用此方法使用盒型邊框屬性。

Border-box Version

爲此，您只需要兩個元素。

HTML

<div class="page">  
</div> 
<div class="page-footer"> 
</div>

CSS

*, *:before, *:after { 
    /* Fix the box model to include padding */ 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
} 

html, body { 
    height: 100%; 
    margin: 0; 
    position: relative; 
} 

.page { 
    min-height: 100%; 
    position: relative; 
    margin-bottom: -150px; 
    padding-bottom: 150px; 
} 

.page-footer { 
    height: 150px; 
    position: relative; 
    z-index: 1; 
}

如果您需要支持舊的瀏覽器，那麼你將需要使用額外的div來推動頁腳下來。

Legacy Version

您將需要爲這個版本的代碼如下所示。

HTML

<div class="page"> 
    <div class="page-push"> 
     <!-- 
      This div just pushes the footer down so content does not overflow it 
     --> 
    </div> 
</div> 
<div class="page-footer"> 
</div>

CSS

html, body { 
    height: 100%; 
    margin: 0; 
    position: relative; 
} 

.page { 
    min-height: 100%; 
    position: relative; 
    margin-bottom: -150px; 
} 

.page-push, 
.page-footer{ 
    height:150px; 
} 

.page-footer { 
    position: relative; 
    z-index: 1; 
}

來源

2013-05-14 09:56:11

你的邊框版本很棒！謝謝我有一個額外的問題：我已經把它變成了這個：http://jsfiddle.net/cjscholten/nnEXC/，我想知道：我如何適應這個，所以有一個5px的邊緣在頂部和底部有身體的背景顏色？（淺藍色） – 2013-05-17 08:24:48

我已更新您的代碼並添加了該行爲。你需要用'body'的填充符將'html'和'body'聲明分開，併爲'.page'元素添加一個圓角。 http://jsfiddle.net/nnEXC/1/ – 2013-05-19 12:06:07

非常感謝。它現在很好用。只有一個小障礙：由於新的填充頁面總是超出屏幕一點點，即使頁面本身幾乎爲空時也添加滾動條。任何想法我能如何反擊？我試過編輯各種填充和邊距，但還沒有找到解決方案。 – 2013-05-24 09:51:34

div#container { 
    min-height:100%; 
    position:relative; 
} 
div#header { 
    background:#ff0; 
    padding:10px; 
} 
div#content { 

    padding-bottom:___px; /* Height of the footer */ 
} 
div#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:___px; /* Height of the footer */ 
    background:#6cf; 
}

如果你申請和調整你的HTML/CSS它西港島線lwork罰款。

// NOTE // 使用絕對頁腳是一種風險！

來源

2013-05-14 09:31:56 DiederikEEn

字的注意。使用元素類型前綴Id選擇器是不必要的。 – 2013-05-14 10:10:43

@JamesSouth我知道，但我調整了他的風格;） – DiederikEEn 2013-05-14 10:41:56

無後顧之憂......希望這位朋友能意識到這一點。 :) – 2013-05-14 11:07:56

-1

試試這個jQuery

Sticky Footer jquery

來源

2013-05-14 09:41:48 Sukhpreet

絕對沒有必要在JavaScript中做到這一點。 – 2013-05-14 09:43:38

@JamesSouth並不意味着你必須投票否決。這是一個解決方案，但它確實不是必要的 – DiederikEEn 2013-05-14 09:44:42

這是一個不正確的答案，鏈接到四年前寫的評論列表錯誤的文章。理論上可以隨時消失的鏈接。它也通過使用JavaScript來完成一項可以通過CSS輕鬆完成的工作，這可能會給後續開發人員帶來潛在的噩夢。如果不是那麼值得投票呢？ – 2013-05-14 10:02:08

站點最小高度100％

回答

相關問題