HTML:具有特定规范的页眉+页脚+内容

维托·奥利维拉(VitorOliveira)

我需要创建一个网页,其中的常规页眉+粘性页脚+垂直拉伸流体内容。但是,这些位置不能是绝对的,因为我需要页面的最小高度为780px。

我设法使用表来完成此操作,但我真的想避免使用它们。我也想避免使用JS或jQuery。粘性页脚只有在达到最小高度之前才是粘性的。

对不起,所有这些特定用语,只是我在相当长的时间内一直在为此而苦苦挣扎。我已经尝试使用pusher进行通常的粘性页脚布局,但是当我使用height:100%时,我的主要内容没有被拉伸(当包装器使用height:auto时,似乎有一个错误)。

应发生的情况的示例图像:http : //s22.postimg.org/6fvdd4mxd/layout.png

JS Fiddle展示我现在所拥有的:http : //jsfiddle.net/6qatg/

代码:

<body>
    <table class="wrapper">
        <tr><td id="topBar" class="topBar">

        </td></tr>

        <tr><td valign="top" id="mainContent" class="mainContent">  
        </td></tr>

        <tr><td class="footer" id="footer">
        </td></tr>

    </table>
</body>

html{
    min-width: 790px;
    min-height: 300px;
    font-family: 'Open Sans', sans-serif;
    height: 100%;
}

body{
    font-family: 'Open Sans', sans-serif;
    /*border: 2px solid black;*/
    height: 100%;
    min-height: 300px;
    min-width: 790px;
}
*{
    margin: 0;
}

.wrapper {
    height: 100%;
    width: 100%;
}
.footer {
    height: 35px;
    background-color: #00F8FD;
    width: 100%;
}

.topBar{
    height: 75px;
    width: 100%;
    background-color: #00F8FD;
}

.mainContent{
    background-color: #EEF8FD;
    height: 100%;
}

提前致谢。

乔纳森·皮珀(Jonathan Pyper)

您是否尝试过在内容容器中添加页眉和页脚?我已经将最小高度设置为500,以进行小提琴演示,没有滚动条,并且页脚停留在最小高度500处;或者将其设置为760时,它将保持该高度。

看到这个http://jsfiddle.net/carbontype/FYe2b/

的HTML

<div class="contain">
    <div class="content">
        <div class="header">header</div>
        <div class="data">hello 123</div>
        <div class="footer">footer</div>
    </div>
</div>

的CSS

*{box-sizing:border-box;}
html, body{height:100%; margin:0px; padding:0px;}
.contain{width:100%; height:100%;}
.header{height:50px; position:absoulte; top:0px; width:100%; background:red; z-index:10;}
.content{height:100%; position:relative; background:green; min-height:500px;}
.content .data{padding:10px;}
.content .footer{position:absolute; bottom:0px; left:0px; width:100%; background:pink;}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章