0

我需要创建一个网页，具有正常的页眉 + 粘性页脚 + 垂直拉伸的流体内容。但是，这些位置不能是绝对的，因为我需要 780 像素的页面最小高度。

我设法使用表格来完成这个，但我真的想避免使用它们。另外我想避免使用 JS 或 jQuery。粘性页脚仅在达到 min-height 之前是粘性的。

对于所有这些具体条款，我很抱歉，只是我为此苦苦挣扎了一段时间。我已经用 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%;
}

提前致谢。

4

5 回答 5

0

我想我已经明白你的要求了吗？如果不是我的道歉

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


*{box-sizing:border-box;}
html, body{height:100%; margin:0px; padding:0px;}
.contain{width:100%; height:100%;}
.header{height:50px; position:fixed; width:100%; background:red; z-index:10;}
.content{height:100%; position:relative; background:green; min-height:790px;}
.content .data{padding:80px 10px 10px 10px;}
.content .footer{position:absolute; bottom:0px; left:0px; width:100%; background:pink;}
于 2013-08-08T16:11:54.420 回答
0

您可以通过设置position:fixed页眉和页脚 ( .topBar,.footer) 来完成此操作，并为主要内容区域 ( .maincontent)min-height:780px;加上一些填充以补偿固定的页眉和页脚。
小提琴： http: //jsfiddle.net/EN3Pj/1/
HTML：

<div id="topBar" class="topBar"></div>
<div id="mainContent" class="mainContent">
   Your content here...
</div>
<div class="footer" id="footer"></div>

CSS

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

body{
    font-family: 'Open Sans', sans-serif;
    /*border: 2px solid black;*/
}
*{
    margin: 0;
}

.wrapper {
    height: 100%;
    width: 100%;
}
.footer {
    height: 35px;
    background-color: #00F8FD;
    width: 100%;
    bottom:0px;
    left:0px;
}
.topBar, .footer{
    position:fixed; //make header and footer fixed position
}
.topBar{
    height: 75px;
    width: 100%;
    top:0px;
    left:0px;
    background-color: #00F8FD;
}

.mainContent{
    background-color: #EEF8FD;
    min-height:780px; //set min-height for content
    padding-top:75px; //compensate for footer and header height
    padding-bottom:35px;
}
于 2013-08-08T16:11:58.800 回答
0

这是你要找的吗？这只是一个粗略的大纲，但我认为它给了你你所经历的。

http://jsfiddle.net/T5xn3/

HTML：

<body>
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
</body>

CSS：

#header {
    width: 100%;
    position: fixed;
    height: 75px;
    background-color: #00F8FD;
}

#body {
    height:600px;
    background-color: red;
    width: 100%;
}

#footer {
    height: 35px;
    width: 100%;
    background-color: #00F8FD;
}
于 2013-08-08T16:12:55.717 回答
0

如果包装器高度自动不起作用，请将其保持在 100%。

http://jsfiddle.net/6qatg/2/

        <div class="wrapper">
        <div    id="topBar" class="topBar">

        </div>

    <div id="mainContent" class="mainContent">  
        </div>

        <div class="footer" id="footer">
        </div>

css

  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: red;
height: 100%;

}

于 2013-08-08T16:18:55.983 回答
0

您是否尝试过在内容容器中添加页眉和页脚？我已经将最小高度设置为 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;}
于 2013-08-08T17:18:06.987 回答