Html: Header + Footer + Fluid Content With Certain Specifications

July 28, 2023 Post a Comment

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

Solution 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

<divclass="contain"><divclass="content"><divclass="header">header</div><divclass="data">hello 123</div><divclass="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;}

Solution 2:

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

<div class="contain">
<divclass="header">header</div><divclass="content"><divclass="data">hello 123</div><divclass="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:80px10px10px10px;}
.content.footer{position:absolute; bottom:0px; left:0px; width:100%; background:pink;}

Solution 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 contentpadding-top:75px; //compensate for footer and headerheightpadding-bottom:35px;
}

Solution 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><divid="header"></div><divid="body"></div><divid="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;
}

Solution 5:

if the wrapper height auto don't work leave it at 100%.

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

        <div class="wrapper">
        <divid="topBar"class="topBar"></div><divid="mainContent"class="mainContent"></div><divclass="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%;

}

Html5 News