I am trying to keep my footer at the bottom of the page. The first way I tried it, the footer would be above the bottom of the page and the background would show. This was with position:static; (like the following image)
The second way I tried is with an absolute footer. This puts the footer at the bottom of pages where there isn't enough content to scroll but on pages with the scroll, it sits at the bottom of the window when it loads and is on top of content.It is not the bottom of the page.
Here is my current code:
<div id="container">
<div id="content">
<div id="slideshow"></div>
<div id="clear"></div>
<div id="boxes">
<div id="box">
<div id="boxheader"></div>
<div id="box1" class="box"></div>
</div>
<div id="box">
<div id="boxheader"></div>
<div id="box2" class="box"></div>
</div>
<div id="box">
<div id="boxheader"></div>
<div id="box3" class="box"></div>
</div>
</div>
<div id="clear"></div>
</div>
</div>
<div id="footer">Content</div>
Here is the CSS
div#container{
position:relative;
margin: 4px;
}
#boxes{
width: 960px;
margin: 50px auto 0px auto;
}
#footer {
clear: both;
margin-top: 50px;
bottom: 0;
left: 0;
height: 200px;
background-color: #fff;
width: 100%;
}
Please let me know if you need any additional information.
set
html, body {
height: 100%;
}
wrap the entire content before the footer in a div.
.wrapper {
height:auto !important;
min-height:100%;
}
You can adjust min-height to your liking based on how much of the footer you want to show in the bottom of the browser-window. If set it to 90%, 10% of the footer will show before scrolling.
So in your example
<body style="height: 100%">
<div id="container" style="min-height: 90%; height: auto !important;">
<div id="content">
<div id="slideshow"></div>
<div id="clear"></div>
<div id="boxes">
<div id="box">
<div id="boxheader"></div>
<div id="box1" class="box"></div>
</div>
<div id="box">
<div id="boxheader"></div>
<div id="box2" class="box"></div>
</div>
<div id="box">
<div id="boxheader"></div>
<div id="box3" class="box"></div>
</div>
</div>
<div id="clear"></div>
</div>
</div>
<div id="footer">Content</div>
I've used the method described in the article liked below many times, and have had no problems with it:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Hope it helps!
Related
Thanks for taking the time to take a look at my dilemma.
What I am trying to do is fill a perfectly square div with a 3x3 grid of other square divs in HTML/CSS. I would like the container to be centered, take up the full height of the page (never scroll) and dynamically resize while retaining its aspect ratio when the view-port is resized. Each of the 9 cells that make up this larger square should resize dynamically as well as retaining their aspect ratios.
Here's as far as I got before getting really stuck by the fact that only the WIDTH is affected. When I resize my window, the height needs to change dynamically.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="homestyle-test.css">
</head>
<body>
<div class="mainframe">
<div class="grid">
<div class="grid__item">
<div class="content">
<div class="content-inside">
<p>Upper left</p>
</div>
</div>
</div>
<div class="grid__item">
<div class="content">
<div class="content-inside">
<p>upper middle</p>
</div>
</div>
</div>
<div class="grid__item">
<div class="content content-lr">
<div class="content-inside">
<p>upper Right</p>
</div>
</div>
</div>
<div class="grid__item">
<div class="content">
<div class="content-inside">
<p>middle Left</p>
</div>
</div>
</div>
<div class="grid__item">
<div class="content">
<div class="content-inside">
<p>middle</p>
</div>
</div>
</div>
<div class="grid__item">
<div class="content content-lr">
<div class="content-inside">
<p>middle Right</p>
</div>
</div>
</div>
<div class="grid__item">
<div class="content">
<div class="content-inside">
<p>Lower Left</p>
</div>
</div>
</div>
<div class="grid__item">
<div class="content">
<div class="content-inside">
<p>Lower middle</p>
</div>
</div>
</div>
<div class="grid__item">
<div class="content content-lr">
<div class="content-inside">
<p>Lower Right</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
html{
background: url(home-assets/homebgtest.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
place-items: start;
}
.grid > * {
background: orange;
width: 100%;
}
.grid > [style^='--aspect-ratio']::before {
content: "";
display: inline-block;
width: 1px;
height: 0;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
Please have a look at the below working snippet as per your requirement of perfect square, hope it helps :)
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.wrap {
max-width: 100vh;
margin: 0 auto;
}
.grid {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr;
}
.grid>* {
background: orange;
padding: 20px;
box-shadow: inset 0 0 0 1px #fff;
}
<div class="wrap">
<div class="grid">
<div class="grid__item">
Upper left
</div>
<div class="grid__item">
upper middle
</div>
<div class="grid__item">
upper Right
</div>
<div class="grid__item">
middle Left
</div>
<div class="grid__item">
middle
</div>
<div class="grid__item">
middle Right
</div>
<div class="grid__item">
Lower Left
</div>
<div class="grid__item">
Lower middle
</div>
<div class="grid__item">
Lower Right
</div>
</div>
</div>
I want my div and navbar's width stretch all the way to the right 100% but for some reason, it stops right before it reaches it. I've added screen cap of what I see
screencap
css
.section2{
font-size: 2em;
background-color: white;
width: 100%;
height: 100%;
opacity: .75;
}
HTML
<section class="section2">
<div class="row" align="center">
<div class="col-md-12">
text
</div>
<div class="row" style="font-size:.75em" >
<div class="col-md-12" >
</div>
</div>
</div>
<br><br>
<div class="row" align="center">
<div class="col-md-12">
text
</div>
<div class="row" style="font-size:.75em">
<div class="col-md-12">text
</div>
</div>
</div>
<br><br>
<div class="row" align="center">
<div class="col-md-12">
text
</div>
<div class="row" style="font-size:.75em">
<div class="col-md-12">Text
</div>
</div>
</div>
</section>
I found the solution body and html should be set to 0 margin and padding
html, body {
margin:0;
padding:0;
}
I think the parent of your section2 isn't at 100% of your screen.
So I'd like my footer to adjust and stay on the bottom of the page no matter the height of the content which is dynamic
Below is the CSS for the body, wrapper and footer .. the footer doesn't not stay in the bottom when the content is too long and gets display in the middle of the page when you have to scroll
body, html{
margin:0px;
padding:0px;
width:100%;
height:100%;
background:#FFFFFF;
}
#wrapper{
position:relative;
top:0px;
left:0px;
width:100%;
padding:0px;
min-height:100%;
overflow-x:hidden;
}
#footer{
position:absolute;
bottom:0px;
left:150px;
width:1600px;
height:500px;
background:blue;
}
...
<div id="wrapper">
<div id="header"></div>
<div id="logo"><img src="images/u176.png" class="logo_pic" style="outline: none;"></div>
<div id="search_bar"><input type="text" name="search_bar" class="search" /></div>
<div id="search_icon"><img src="images/u205.png" width="28px" height="28px" /></div>
<div id="become_a_chef"><span id="become_title">Become </span></div>
<div id="login">Log in</div>
<div id="sign_up">Sign up</div>
<div id="tap-container"><img id="tap-pic" class="food_container_pic" src="images/today_menu/u35.png" /></div>
<div id="tap-content"></div>
<div class="column1">
<div class="tap-links">Become a member</div>
<div class="tap-links">Sign up</div>
<div class="tap-links">Log in</div>
<div class="tap-links">Home</div>
</div>
<div class="column2">
<div class="tap-links">Search</div>
<div class="tap-links">Download the App</div>
<div class="tap-links">How it works</div>
<div class="tap-links">Help</div>
</div>
<div id="chef-rating-responsive">
<div class="subinfo_container3"><img class="food_container_pic" src="images/fusion/u1837.jpg" /></div>
<div class="subinfo_container4">A</div>
<div class="subinfo_container5">Open Now</div>
<div class="subinfo_container6">More...</div>
</div>
<div id="cover_picture_container"><img class="food_container_pic" src="images/u4.jpg" /></div>
<div id="profile_picture_container"><img id="profile_picture" class="img" src="<?php echo $picture;?>"></div>
<div id="chef_description_container">
<div id="kitchen_name"><span id="kitchen_title"><?php echo $name;?></span></div>
<div id="chef_description_summary"><?php echo description;?></div>
<div id="schedule_info_container">
<div class="subinfo_container">
<img id="chef_rating" src="images/fusion/u1837.jpg" width="186px" height="35px">
<span id="number_reviews">64 reviews</span>
</div>
<div class="subinfo_container"><span id="open_now">Open Now</span></div>
<div class="subinfo_container"><span id="chef_location">Chef Location</span></div>
<div class="subinfo_container2"><span id="letter_grade">A</span><span id="chef_grade">since Nov.2016</span></div>
<div class="subinfo_container2">
<div id="clock"><img id="u1341_img" src="images/u1341.png" class="full" ></div>
<span id="schedule_hours"></span>
</div>
<div class="subinfo_container2"><span id="chef_contact">Chef contact</span></div>
</div>
</div>
<div class="today_menu">
<div class="space"></div>
</div>
<div id="footer">
<div class="company_footer">
<div class="title">Company</div>
<div class="column_content_footer">About</div>
<div class="column_content_footer">Careers</div>
<div class="column_content_footer">Press</div>
<div class="column_content_footer">Blog</div>
<div class="column_content_footer">About</div>
<div class="column_content_footer">Help</div>
<div class="column_content_footer">Policies</div>
<div class="column_content_footer">Disaster</div>
<div class="column_content_footer">Terms & Privacy</div>
</div>
<div class="discover_footer">
<div class="title">Discover</div>
<div class="column_content_footer">Trust & Safety</div>
<div class="column_content_footer">Invite friends</div>
<div class="column_content_footer">Gift card</div>
<div class="column_content_footer">pricks</div>
<div class="column_content_footer">Mobile</div>
<div class="column_content_footer">Events support</div>
<div class="column_content_footer">Travel</div>
<div class="column_content_footer">Nearby</div>
</div>
<div class="kitchening_footer">
<div class="title"></div>
<div class="column_content_footer"></div>
<div class="column_content_footer">Serving</div>
<div class="column_content_footer">Responsible</
</div>
<div class="social_media_buttons">Hey</div>
</div>
</div>
</div>
html, body {
padding: 0;
margin: 0;
background: #fff;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
padding-bottom: 400px;
box-sizing: border-box;
}
#footer {
z-index: 50;
position: fixed;
bottom: 0;
width: 100%;
height: 400px;
background: blue;
}
<div id="wrapper">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="footer">
</div>
</div>
This works perfectly fine for me (tweaked it a little bit). I'd advice you not to use fixed widths like 1600px, but to work with percentages and max-widths. Hope this helps
If your footer has a fixed height you could do something like this:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.force-min-height {
min-height: 100%;
position: relative;
}
.header {
background: grey;
}
.content {
/* padding being the same as footer height */
padding-bottom: 4em;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4em;
background: grey;
}
<div class="force-min-height">
<div class="header">Header</div>
<div class="content">
line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line
</div>
<div class="footer">Footer</div>
</div>
Heh, sorry for the long title, but I need a fix for this and have been on it for some time now.
Basically there is a header and I'd like to move content underneath it.
Everything is relative (keeping it centered)
so header has a margin top, z-index, ecc.
The page is relative with a negative margin and contains nested floated columns that wont go up past the header (dammit) and cannot figure out why.
I would like to avoid using absolute positioning if possible.
Here's the code:
<div class="header wrapper-standard">
<div class="logo">
<div class="inside">hello</div>
</div>
<div class="menu-wrapper-outer">asda</div>
<div class="clear"></div>
</div>
<div class="about-page wrapper-standard notop">
<div class="about-page content">
<div class="about-block wrapper-long">
<div class="col col-left text-first">
asda
</div>
<div class="col col-right">
lol
</div>
<div class="clear"></div>
</div>
<div class="about-block wrapper-long">
<div class="col col-left text-first">
asda
</div>
<div class="col col-right">
lol
</div>
<div class="clear"></div>
</div>
<div class="about-block wrapper-long">
<div class="col col-left text-first">
asda
</div>
<div class="col col-right">
lol
</div>
<div class="clear"></div>
</div>
</div>
</div>
Here's the fiddle:
fiddle
Thanks.
Here is a very basic example of how you can have a fixed width, centered page with a fixed header which allows the content to flow underneath:
CSS:
<style type="text/css">
.wrapper{
height:600px;
margin:0 auto;
width:400px;
background-color:#0ff;
}
.header_wrapper {
position:fixed;
background-color:#ffd800;
}
.header {
width:400px;
background-color:#f00;
height:100px;
}
.page {
padding-top:100px; /*height of header*/
}
</style>
HTML:
<body>
<div class="wrapper">
<div class="header_wrapper">
<div class="header">Header</div>
</div>
<div class="page">
Content will be here bla bla etc
</div>
</div>
</body>
Here is a fiddle so that you can see it working: http://jsfiddle.net/JjBG5/1/
I am trying to display dynamic generated div's horizontally with scroll bar. There can be n number of div's.
Below is my Code:
HTML (index.html)
<div style="width:100%;float:left;" id="old">
<div>
<h1>First Div</h1>
<div id="R1">
<h1>First Div Internal</h1>
<a id="R1_index" class="close_page" href="javascript:void(0)">Close</a>
</div>
</div>
<div>
<h1>Second Div</h1>
<div id="R2">
<h1>Second Div Internal</h1>
<a id="R2_index" class="close_page" href="javascript:void(0)">Close</a>
</div>
</div>
</div>
I follow this link for solution.
But when dynamic div's load, structure looked messed up.
Here is the messy look:
HTML (index.html)
<div style="width:100%;float:left;" id="old">
<div id="items">Missing Internal Content</div>
<div id="items">Missing Internal Content</div>
</div>
Please help me guys.
i imagin the problem is that the div's in the container (id="old" in your example) are not next to each other, but instead beneath.
if that is your problem, you add the following styles to your container:
#old {
overflow: auto;
white-space: nowrap;
}
and make the childern-divs inline-block elements:
#old > div {
display: inline-block;
}
then it should work as expected. see the working solution:
* {
padding: 0;
margin:0;
}
#container {
width: 300px;
height: 100px;
overflow: auto;
white-space: nowrap;
}
.element {
display: inline-block;
}
.box {
width: 100px;
height: 100px;
background: lightgrey;
}
<div id="container">
<div class="element">
<div class="box">
<h1>1</h1>
</div>
</div>
<div class="element">
<div class="box">
<h1>2</h1>
</div>
</div>
<div class="element">
<div class="box">
<h1>3</h1>
</div>
</div>
<div class="element">
<div class="box">
<h1>4</h1>
</div>
</div>
<div class="element">
<div class="box">
<h1>5</h1>
</div>
</div>
<div class="element">
<div class="box">
<h1>6</h1>
</div>
</div>
<div class="element">
<div class="box">
<h1>7</h1>
</div>
</div>
<div class="element">
<div class="box">
<h1>8</h1>
</div>
</div>
</div>
otherwise please provide a better example/description of what the problem exactly is.