站点最小高度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

你能去除心不是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; 
}

你的边框版本很棒！谢谢我有一个额外的问题：我已经把它变成了这个：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 // 使用绝对页脚是一种风险！

字的注意。使用元素类型前缀Id选择器是不必要的。 – 2013-05-14 10:10:43

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

无后顾之忧......希望这位朋友能意识到这一点。 :) – 2013-05-14 11:07:56

答

试试这个jQuery

Sticky Footer jquery

绝对没有必要在JavaScript中做到这一点。 – 2013-05-14 09:43:38

@JamesSouth并不意味着你必须投票否决。这是一个解决方案，但它确实不是必要的 – DiederikEEn 2013-05-14 09:44:42

这是一个不正确的答案，链接到四年前写的评论列表错误的文章。理论上可以随时消失的链接。它也通过使用JavaScript来完成一项可以通过CSS轻松完成的工作，这可能会给后续开发人员带来潜在的噩梦。如果不是那么值得投票呢？ – 2013-05-14 10:02:08

站点最小高度100％

相关推荐