My page ...
http://webpages.charter.net/jolove/Escort_Folder/test.html
thanks to: fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css
Now I have a functional footer that adheres to the bottom of the window ..
except now what I need to do is get the footer to stick to the bottom with the height of the scrollable area above the footer shrinking or expanding accordingly as the window height changes.
In other words, the window's vertical scroll bar should never appear.
John
If correctly understand what you're trying to do it can be done using divs with percentage heights. Here is the basic idea:
<div id="header" style="height: 10%"></div>
<div id="scrollableContent" style="height: 60%; overflow: auto"></div>
<div id="footer" style="height: 30%"></div>
Using the percentage heights each div will resize according to the window size and only the scrollableContent div will have a scroll bar.
i am not sure if you wish the following just try it. on the #poemScroller change the height:28em; to height:auto;
you can use static positioning to achieve the same behavior see this example
<html>
<head>
<style>
#header{
position:fixed;
top:0;
height:50px;
z-index:5;
width:100%;
}
#content{
/* margin top should be >= header height
this also applies for footer */
margin: 50px 0;
width:100%;
}
#footer{
position:fixed;
bottom:0;
height:50px;
z-index:5;
width:100%;
}
</style>
</head>
<body>
<div id="header" > <h1>This is header</h1> </div>
<div id="content" >
<p>alot of content</p>
</div>
<div id="footer" > <h1>This is footer</h1> </div>
</body>
</html>
Related
I am having an issue with my divs moving when the page is resized. If you look at the plunker you will see a Header with boxes below. If you resize the workspace by dragging the scroll bar to the left you will see how the page should be. I tried wrapping all items in 1 div named wrapper and tried both relative and absolute positioning with a min-width. I also did the same for body. After inspecting the page with firebug looks like the html tag should have sizing or positioning. That didn't work either (see below). I would like to be able to minimize my screen to 50% and maximize to 250% and keep the same initial layout as if my screen is at 95% based on the wrapper. Any ideas?
Here's plnkr
<html>
body, html{margin:0px; padding:0px; width:100%; min-width: 900px; position:relative}
div.wrapper{ width:95%; min-width: 900px; padding-left: 6px; padding-top:5px; position: relative; }
<body>
<div class="wrapper" >
<div id="header">
<img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1>
</div>
<div class="left"></div>
<div class="right"></div>
</div> <!--end wrapper -->
</body>
</html>
you could use percentage and fix min-wheight + set overflow to auto (looks like frameset .. not so nice actually)
Or you could try to relay on box-sizing and use vertical padding on percentage value(it will use parent's width as reference).
floatting pseudo can then, be used and will allow divs to grow taller instead showing a scrollbar.
. {
box-sizing:border-box;
}
.wrapper {
max-width:1300px;
margin:auto; /* ?*/
}
.wrapper #header ~ div {
border:double;
margin:0.4% 0.2%;
padding:5px;
}
#header, .right, .rightbottom {
overflow:hidden;
}
.left {
float:left;
width:30%;
}
.left:before {
content:'';
float:left;
padding-top:204.5%;
}
.right:before, .rightbottom:before {
content:'';
padding-top:30%;
float:left;
}
.wrapper #header ~ div.rightbottom {
border:solid 1px;
}
.rightbottom:before {
padding-top:60%;
}
<div class="wrapper" >
<div id="header">
<img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1>
</div>
<div class="left">
</div>
<div class="right" >
<div class="gridStyle" data-ng-grid="gridOptions1">grid</div>
</div>
<div class="rightbottom">right bottom</div>
</div>
http://plnkr.co/edit/K1yOpBOfX3ukqHX7f2oa?p=preview
I'm not too sure of what kind of behavior you look for once there is real stuff in your pages.
If you want the header and the two divs to always have their own row, perhaps you could contain them each in divs that are set to width: 100%?
I'm building a 1 column responsive blog site.
I have a fixed position header with navigation, content section with x amount of blog posts (as excerpts) and a footer containing a contact form.
<div id="header">Navigation & Branding</div>
<div id="content">Blog Content</div>
<div id="footer">Contact Form</div>
Everything is working as required apart from the height of the footer.
I would like to make the footer height match the height of the browser window, so that (apart from the fixed header) when you scroll to the bottom of the page the only the footer is visible and fills the browser window entirely.
How do I achieve this with css?
You can do this by setting the #footer as position:absolute; then setting both the width & height to 100%.
As long as your footer div is a direct descendant of the body, and the body has the margin and padding set to 0, setting the height of your footer to 100% should do.
This example should demonstrate:
<html>
<head><title>title</title><head>
<body style="margin:0; padding:0;">
<div id="header" style="height: 300px; background-color: blue;">Navigation & Branding</div>
<div id="content" style="height: 500px; background-color: red;">Blog Content</div>
<div id="footer" style="height:100%; background-color: yellow;">Contact Form</div>
</body>
</html>
you want some thing like this ??
HTML:
<div id="mainbody">
<div id="header">Navigation & Branding</div>
<div id="content">Blog Content</div>
<div id="footer">Contact Form</div>
</div>
CSS:
html, body{
width:100%;
height:100%;
}
#header{
position:fixed;
top:0;
height:50px;
width:100%;
background:red;
color:white;
}
#mainbody{
padding-top:50px;
background:blue;
color:white;
width:100%;
}
#footer{
background:green;
position:absolute;
height:100%;
width:100%;
color:white;
}
DEMO
This is somewhat related to this question but I'm trying to achieve this when the div is aligned vertically.
More or less, this is what I'm trying to achieve:
Main Div: Take the rest of the screen
Footer Div: Take as much space as needed
The css for float:bottom isn't available, so I'd like to hear some alternatives.
Here's what I have at the moment:
<div id="main_div" style="height:100%;overflow:scroll">
...Contents
</div>
<div id="footer_div" style="height:50px">
...Contents
</div>
Footer shows below main_div and the user has to scroll down to see it, instead of main_div adjusting itself to take just enough screen height to prevent the scrollbar to show up.
you can check this fiddle
http://jsfiddle.net/sarfarazdesigner/3fLca/
let me know am understand right or wrong? because what i have done what i understood by your question.
#main_div{
position:absolute;
left:0;
right:0;
top:0;
bottom:50px;
overflow:auto;
background:#eee;
}
#footer_div{
position:absolute;
left:0;
right:0;
bottom:0;
background:#ddd;
height:50px;
}
You can set the footer a fixed position at the bottom of the page. Any overlapping content will scroll behind it.
<html>
<head>
</head>
<body>
<div class="wrapper" style="width: 100%; border:1px solid blue;">
<p>Your website content here.</p>
<p>Your website content here.</p>
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer" style="width: 100%; position:fixed; left:0; bottom: 0; border:1px solid red;">
<p>FOOTER CONTENT HERE</p>
</div>
</body>
</html>
I have two child divs in a parent div. first child div A has an absolute height and second div B should take the rest of the height available. How to do this? Basically for div, I want height like (100% - 37px)
<style>
#C{
height:100%;
width:500px;
}
#A{
height:37px;
width:100%;
}
#B{
height: ????;
width:100%
}
</style>
<div id="C">
<div id="A"></div>
<div id="B"></div>
</div>
#alter, for rest on the height you need to give padding to the div B according to the height of div A
#B{
padding-top:37px;
}
for example
I think the best way to achieve that is to give the parent div a min-height and then give div B a min-height of (min-height - 37)px. See code below
#C{min-height:600px; width:500px;}
#A{height:37px; width:100%;}
#B{min-height:563px; width:100%}
Sample Code:
<html>
<head>
<style type="text/css">
#C{min-height:600px; width:500px; background-color:yellow;}
#A{height:37px; width:100%; background-color:blue;}
#B{min-height:563px; width:100%; background-color:black;}
</style>
</head>
<body>
<div id="C">
<div id="A"></div>
<div id="B"></div>
</div>
</body>
</html>
I have added color to the divs just to differentiate them
Duplicate of this question.
I've got an existing site (jacquelinewhite.co.uk), on it there is a footer. Currently this footer always sits underneath the main content. I'm trying to make it float to the bottom of the browser window, or if the content is bigger than the window, stay at the bottom of the content.
Effectively the HTML is structured like this:
<div id="container">
<div id="top_bar">
</div>
<div id="header">
</div>
<div id="left_menu">
</div>
<div id="right_content">
</div>
<div class="clear">
</div>
<!-- FOOTER AREA -->
<div id="footer">
</div>
<!-- END FOOTER AREA -->
</div>
I have tried absolute position, bottom 0, which puts the footer at the bottom of the window, but if the content of the window is bigger then the footer covers the content.
How should I fix this?
This one's always worked well for me: CSS Sticky Footer
Test drive this...
body {
margin:0;
padding:0;
z-index:0;
}
#toolbar {
background:#ddd;
border-top:solid 1px #666;
bottom:0;
height:15px;
padding:5px;
position:fixed;
width:100%;
z-index:1000;
}
Assuming you are using footer() element I found just adding this to CSS worked for me
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}