HTML: Header + Footer + Fluid Content with certain specifications

问题

I need to create a webpage, with a normal header + sticky footer + fluid body content stretched vertically. However, these positions can't be absolute, as I need a page min-height of 780px.

I managed to acomplish this using tables, but I really want to avoid using them. Also I'd like to avoid the usage of JS or jQuery. The sticky footer is only sticky until min-height is reached.

Sorry for all these specific terms, it's just that I'm struggling with this for quite some time. I've tried the usual sticky footer layout with the pusher , but my main content isn't stretched when I use height: 100% (it seems there's a bug when the wrapper uses height: auto).

Example image of what should happen: http://s22.postimg.org/6fvdd4mxd/layout.png

JS Fiddle to show what I have right now: http://jsfiddle.net/6qatg/

The code:

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

Thanks in advance.

回答1:

have you tried adding the heading and footer inside the content container? I've made the min height 500 for fiddle demo purposes, there is no scroll bars and the footer stays down at min height of 500 - or when set to 760 it will stay to that.

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

回答2:

I think I have understood what you're asking for? if not my apologys

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

回答3:

You can accomplish this by setting position:fixed to the header and footer (.topBar,.footer), and giving the main content area (.maincontent) a min-height:780px; along with some padding to compensate for the fixed header and footer.
Fiddle: 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;
}

回答4:

Is this what you're looking for? This is just a rough outline, but I think it gives you what you went.

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

回答5:

if the wrapper height auto don't work leave it at 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%;

}

来源：https://stackoverflow.com/questions/18130543/html-header-footer-fluid-content-with-certain-specifications

标签

html

css

header

footer