HTML，CSS，Sticky Header和Footer，最小高度内容DIV

时间：2014-12-16 14:39:40

标签： html css min sticky

我已经审核了很多帖子，并没有找到我正在寻找的内容。也许我可能错过了什么。如果是的话，我道歉。我有一个粘性页眉和页脚，并希望我的内容DIV观察到最低高度为100％。在这种情况下，需要最小高度的DIV具有ID“minHeightContainer”。我在DIV中注释了一些段落，当未注释时，它说明了所需的垂直滚动行为。然而，当我注释掉时，由于我的各种元素背景颜色不同，我希望DIV能够观察到100％的最小高度。我的HTML和CSS如下所示。非常感谢任何帮助。

<!DOCTYPE html>

<html>

<head>

<title>Sticky Header and Footer</title>

<style type="text/css">
@font-face
{
    font-family:Segoe UI;
}

@font-face
{
    font-family:Segoe UI Semibold;
}

@font-face
{
    font-family:Segoe UI Light;
}

body
{
    background:#fff;
    border:0px;
    color:#323232;
    font-family:"Segoe UI";
    font-size:12px;
    height:100%;
    margin:0px;
    max-height:100%;
    overflow-y:scroll;
}

.background
{
    background-color:#eee;
    bottom:0px;
    left:0px;
    position:fixed;
    right:0px;
    top:0px;
    z-index:-1;
}

.container
{
    margin:0px auto 0px auto;
    min-height:100% !important;
    width:1190px;
}

.container-front
{
    background-color:#fff;
    padding:35px 5px 50px 5px;
}

.header-footer
{
    background-color:#455a72;
}

.navbar
{
    min-height:30px;
    position:relative;
    z-index:1000;
}

.navbar-fixed-top
{
    left:0px;
    position:fixed;
    right:0px;
    top:0px;
    z-index:1030;
}

.navbar-header
{
    background:url('Images/Header.png') no-repeat right 0px;
}

.shadow
{
    -moz-box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25);
    -webkit-box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25);
    box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25);
}

.toolbar
{
    min-height:45px;
    position:relative;
    z-index:1000;
}

.toolbar-fixed-bottom
{
    bottom:0px;
    left:0px;
    position:fixed;
    right:0px;
    z-index:1030;
}
</style>

</head>

<body>
    <form>
        <div class="background">
        </div>
        <div class="header-footer navbar navbar-fixed-top">
            <div class="container navbar-header">
                HEADER
            </div>
        </div>
        <div class="container container-front shadow" id="minHeightContainer">
		<p>Start</p>


<!-- UNCOMMENT TO OBSERVE VERTICAL SCROLL

<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
-->


<p>End</p>
        </div>
        <div class="header-footer toolbar toolbar-fixed-bottom">
            <div class="container">
                FOOTER
            </div>
        </div>
    </form>
</body>
</html>

1 个答案:

答案 0 :(得分：1)

您需要再添加两行CSS：

  • 要使%高度工作，请使用：
  

html，表单{height：100％}

  • 为避免填充增加容器的高度，请使用此
  

.container-front {box-sizing：border-box; }

检查下面的代码段

＆＃13;
＆＃13; 
<!DOCTYPE html>

<html>

<head>

<title>Sticky Header and Footer</title>

<style type="text/css">
@font-face
{
    font-family:Segoe UI;
}

@font-face
{
    font-family:Segoe UI Semibold;
}

@font-face
{
    font-family:Segoe UI Light;
}
html,form {height:100%}
body
{
    background:#fff;
    border:0px;
    color:#323232;
    font-family:"Segoe UI";
    font-size:12px;
    height:100%;
    margin:0px;
    max-height:100%;
    overflow-y:scroll;
}

.background
{
    background-color:#eee;
    bottom:0px;
    left:0px;
    position:fixed;
    right:0px;
    top:0px;
    z-index:-1;
}

.container
{
    margin:0px auto 0px auto;
    min-height:100% !important;
    width:1190px;
}

.container-front
{
    box-sizing:border-box;
    background-color:#fff;
    padding:35px 5px 50px 5px;
}

.header-footer
{
    background-color:#455a72;
}

.navbar
{
    min-height:30px;
    position:relative;
    z-index:1000;
}

.navbar-fixed-top
{
    left:0px;
    position:fixed;
    right:0px;
    top:0px;
    z-index:1030;
}

.navbar-header
{
    background:url('Images/Header.png') no-repeat right 0px;
}

.shadow
{
    -moz-box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25);
    -webkit-box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25);
    box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25);
}

.toolbar
{
    min-height:45px;
    position:relative;
    z-index:1000;
}

.toolbar-fixed-bottom
{
    bottom:0px;
    left:0px;
    position:fixed;
    right:0px;
    z-index:1030;
}
</style>

</head>

<body>
    <form>
        <div class="background">
        </div>
        <div class="header-footer navbar navbar-fixed-top">
            <div class="container navbar-header">
                HEADER
            </div>
        </div>
        <div class="container container-front shadow" id="minHeightContainer">
		<p>Start</p>


<!-- UNCOMMENT TO OBSERVE VERTICAL SCROLL

<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
-->


<p>End</p>
        </div>
        <div class="header-footer toolbar toolbar-fixed-bottom">
            <div class="container">
                FOOTER
            </div>
        </div>
    </form>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题