Question

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

我设法使用表来完成这个，但我真的想避免使用它们。另外我想避免使用JS或jQuery。粘性页脚只有粘性才能达到最小高度。

对于所有这些特定条款，我们很抱歉，我正在努力解决这个问题。我尝试了通常使用推杆的粘性页脚布局，但是当我使用高度时，我的主要内容没有拉伸：100％（当包装使用高度：auto时，似乎有一个错误。）

应该发生什么的示例图片：http://s22.postimg.org/6fvdd4mxd/layout.png

JS小提琴展示我现在拥有的东西： 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%;
}

提前致谢。

Answer 1

我想我已经理解了你的要求？如果不是我的道歉

<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;}

Answer 2

您可以通过将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; }

Answer 3

这是你正在寻找的吗？这只是一个粗略的轮廓，但我认为它可以为您提供所需的信息。

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;
}

Answer 4

如果包装纸高度auto不起作用，请将其保留为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%;

}

Answer 5

您是否尝试在内容容器中添加标题和页脚？我为小提琴演示目的设置了最小高度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;}

HTML：标题+页脚+流体内容，具有一定的规格

5 个答案: