How to fix height 100% in content page ? CSS and Div
Header=72px
Content Height=100%
footer=72px
I would like to fix expend Content height 100% full screen.
Best Regards
If I understand correctly, I think you want the header and footer to each be 72px high, and the content to take up 100% of the remaining space. So the footer is pushed to the bottom of the page.
Markup, place this so #container is the only direct child of body. In other words place all of your content is inside the #header, #body, and #footer.
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
Style
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
padding:10px;
height:72px;
}
#body {
padding:10px;
padding-bottom:72px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:72px; /* Height of the footer */
}
If your content is in a div, give it a height as follows
<div id="container">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
div#container
{
height: 100%;
}
div#header
{
height: 72px;
}
div#content
{
height: 100%;
}
div#footer
{
height: 72px;
}
Related
I have a div with a big list, I only want to see (with a scroll) the number of elements that fits in the screen. So I cannot figure how can I adjust the height of the div to the bottom border of screen.
Do I have to use JS?
Based on screen size apply media query styles.
for example Footer want to be bottom we use this for all the browsers
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0; /* Always make footer in bottom at any screen */
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
If you got a fixed size above. You can fill the rest by using css calc.
.test {
height:300px;
width: 100%
background-color:yellow;
}
.full-height {
height: calc(100vh - 300px);
background-color:red;
}
<div class="test"></div>
<div class="full-height">
</div>
A better solution is to use a wrapper. Like this:
.wrapper {
background-color:red;
height: 100vh;
}
.list {
background-color: white;
width: 100%
}
<div class="wrapper">
<div class="list">
<ul>
<li>This</li>
<li>is</li>
<li>a</li>
<li>list</li>
<ul>
</div>
</div>
I've got the following setup:
header,
content - which needs to be full height of the browser,
and footer
The current setup below is how I want it (when the browser is opened fully). Basically the content div should have 100% height and you simply scroll to view the footer. The amount you scroll is based on the height of the footer. The content will be a simple login form. I've added in a div with a fixed height to demo my issue (The login div could be any height). However the problem is when the browser is resized vertically. This is the tricky bit to explain:
My question is how do I prevent the footer from overlapping the content div? I'd like the footer to snap to the bottom of the content div. As the browser window gets shorter, i'd like the content div to still remain 100% in height. The browser will cut the content div as it gets vertically shorter (which is fine) but I'd like the footer underneath the content div and still want to only be able to scroll to the height of the footer.
I think i'm missing margin-bottom somewhere but not quite sure where. Could someone please help with this issue. Thanks in advance.
the html:
<body>
<div class="wrapper">
<div class="content">
<div class="loginPanel">
</div>
</div>
</div>
<div class="footer">
footer, hidden until scrolled
</div>
</body>
the css:
html, body {
height:100%;
padding:0;
margin:0;
}
.wrapper {
height:100%;
background:orange;
}
.content {
background:grey;
width:100%;
height:100%;
}
.footer {
background:purple;
height:200px;
width:100%;
color:#fff;
}
.loginPanel {
width:600px;
height:300px;
background:green;
margin:0 auto;
}
You should be able to achieve what you want with the following:
html, body {
height:100%;
padding:0;
margin:0;
position:relative;
}
.wrapper {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.content {
background:grey;
width:100%;
min-height:100%;
}
.footer {
height:200px;
width:100%;
}
.loginPanel {
width:600px;
height:300px;
background:green;
margin:0 auto;
}
<div class="wrapper">
<div class="content">
<div class="loginPanel"></div>
</div>
<div class="footer">footer, hidden until scrolled</div>
</div>
You can try adding a margin-bottom to the <body> or <html> element; that should fix your issue.
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
I've been trying for hours now couldn't find any solution for my problem I've made my footer stick to the bottom by position:fixed;bottom:0; the footer gets to bottom but when my content is more the footer doesn't expand to the bottom relative to the content so i've did this made a container div and placed my footer in it
<div id="container">
<div id="body">
</div>
<div id="footer">
</div>
</div>
#container
{
position:relative;
}
#footer
{
position:absolute;
bottom:0;
height:30px;
}
so far so good but when i try to increase my footer size(height) to 300PX it occupies my entire page I just want the footer to be at bottom with same height i have even tried making the #body{min-height:500px;} but my footer still doesn't go down with 300px of height.
To be exact i want a footer like stackoverflow but when there is no content i should still stick to bottom with a min body height.
Hi please follow the link http://jsfiddle.net/cooolkiran/yVC8r/
<div class="page-wrap"> Content</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
}
Add:
html, body {height: 100%;}
to your CSS and see if that works.
Replace -
<div id="container">
<div id="body">
</div>
<div id="footer">
</div>
</div>
with following code - (try with closing div id="body" after footer division)
<div id="container">
<div id="body">
<div id="footer">
</div>
</div>
</div>
jsfiddle - http://jsfiddle.net/nMVA5/
Try this:
<div id="container">
<div id="body">
this is body
</div>
<div id="footer">
this is footer
</div>
</div>
#container
{
border:solid red thin;
position:relative;
height:100px;
}
#footer
{
border:solid red thin;
position:absolute;
bottom:0;
height:30px;
width:100%;
}
demo link:http://jsfiddle.net/yVC8r/2/
I have a web page that is divided into header, page and footer.
The problem is that I made the page height :auto;.
But it does not work and I need the page to automatically grow up.
This is what I have in the CSS:
/* Page */
#page-wrapper {
overflow: auto;
height: auto;
text-align: center;
}
#page {
overflow: auto;
width: 1120px;
margin: 0px auto;
padding: 50px 40px;
color: #8F8F8F;
min-height:700px;
height:auto;
}
And HTML:
<body>
<div id="banner">
<div class="img-border">
<div id="header-wrapper">
<div id="header">
<div id="logo">
</div>
</div>
</div>
</div>
</div>
<div id="wrapper">
<div id="page-wrapper">
<div id="page">
<div id="wide-content">
</div>
</div>
</div>
</div>
It is very unclear what it is that you want.
In your first line you say you want a footer, but your HTML and CSS don't show any footers.
If you want a footer which sticks to the bottom of the page, have a look at the CSS Sticky Footer.
You shouldn't need the height in there at all... a div will grow or shrink with the amount of content inside of it. Try removing height: auto; completely.
If though you mean that you want to make the content section 100% of the page height even when there isn't enough content, this should help Make div 100% height of browser window
Do you mean you want the footer of your page at the bottom and the div imbetween to take up the remaining space (it's a little difficult to determine from your wording)?
If this is you what you want, I'd suggest looking at this blog post:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
HTML summary:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS summary:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
If got a very basic layout, with a header, content container and a footer.
What i need done, is to make my content container size up, so that the whole layout will fit on the screen. (unless the text in the content container extends this of course).
I've tried assigning a height 100% value to my body, and from there assigning my content containers height to 100% aswell, but that results in making my content container size up to the height of the full screen.
Before that i had the height on the content container set to auto, which of course resulted in the page not being long enough, if a visitor with a bigger screen size than the layout, viewed the page.
Here is a part of my code:
HTML:
<body>
<div class="background"></div>
<div class="page">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
.page {
position:relative;
height:100%;
z-index:1;
}
.content {
position:relative;
width:850px;
height: 100%;
margin: 0 auto;
background: url(images/content.png) 0 0 repeat-y;
}
I think this what you need (the footer will be always sticked to the bottom)
CSS
html, body {
margin:0;
padding:0;
height:100%;
}
.page {
min-height:100%;
position:relative;
}
.header {
background:#00ff0f;
padding:30px;
}
.content{
padding:10px;
padding-bottom:45px; /* Height+padding(top and botton) of the footer */
text-align:justify;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height:15px; /* Height of the footer */
background:#00ff0f;
padding:10px 0; /*paddingtop+bottom 20*/
}
.content {
height:100%; // IE HACK
}
HTML
<div class="page">
<div class="header">Header</div>
<div class="content">
Some Content Here...
</div>
<div class="footer">Footer</div>
</div>
Tested in all major browsers.
DEMO.
What you really want is a sticky footer, no? You can style the other elements to give the illusion that the #content element is bigger than it really is.
http://ryanfait.com/sticky-footer/