I am trying to make a footer by css and want the footer to be the bottom of page, however, some content are stretch to inside the footer,
the following are my footer css
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
<div id="footer" style="background-color:#0099CC">
<center>
<table style="width:100%">
<tr>
<td valign="top">Copyright © 2016, Chaatz</td>
<td align="right" style="white-space:pre">Terms and Conditions
Privacy Notice</td>
</tr>
</table>
</center>
<br>
<br>
</div>
You can use the height of the footer element as a padding-bottom of the content and negate the same value in margin-top of the footer element.
<div class="wrapper">
page content
</div>
<div class="footer">
footer content
</div>
.wrapper{
height:100%;
padding-bottom:150px;
}
.footer{
height:150px;
margin-top:-150px;
}
Related
This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
Closed 7 years ago.
I'd like to redesign my web design as follows:
It is mostly simple and could all be done with CSS and no tables, except for the way the logo "TEST" overlays both the purple border and the white content area. I cannot see how to do this without using a table of three rows and three columns (and background images in the cells) as shown in this "cut" image:
The psuedo-code would be as follows:
<table>
<!-- HEADER ROW -->
<tr>
<TD> <!-- Background: Purple/Grey image stretched horizontally --> </TD>
<TD> <!-- Background: Purple/white image stretched horizontally -->
<!-- HEADER CONTENT (Logo image "TEST", and menu) --> </TD>
<TD> <!-- Background: Purple/Grey image stretched horizontally --> </TD>
</tr>
<!-- CONTENT ROW -->
<TD> <!-- Background: Grey color --> </TD>
<TD> <!-- Background: white color --> </TD>
<!-- PAGE CONTENT --> </TD>
<TD> <!-- Background: Grey color --> </TD>
<!-- FOOTER ROW -->
<tr>
<TD> <!-- Background: Purple color --> </TD>
<TD> <!-- Background: Purple color -->
<!-- FOOTER CONTENT --> </TD>
<TD> <!-- Background: Purple color--> </TD>
</tr>
</table>
But I would like to do this without tables if possible. Is there a way?
you could make an CSS style for TEST object with property of
position: absolute; left: %px; bottom: %px;
I make layout exactly what you want.For title you need position:absolute and give position:relative to its parent div.
DEMO :
http://jsfiddle.net/ue5cu7du/
<div id="header">
<ul><li>menu-1</li>
<li>menu-2</li>
<li>menu-3</li></ul>
</div>
<div class="container">
<div id="nav" class="left">
</div>
<div id="section">
<div class="logo-name">TEST2</div>
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="nav" class="right">
</div>
</div>
<div id="footer">
Copyright © tyhy.com
</div>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
position:relative;
}
#footer {
position:relative;
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
.right{float:right}
.left{float:left}
.logo-name{
position: absolute;
top: -22px;
color: blue;
width: 100%;
font-size: 36px;
margin: 0 auto;
font-weight: bold;}
li{display:inline-block;list-style:none;width:80px}
ul{text-align:right}
You can put the different rows in <header>, <main>, and <footer> tag and then define for header and footer tag a padding-left and padding-right with your specified value x and then for the main tag specify for margin-left and margin-right the same value x (x is the distance between the screen edge and the edge of your content, the width of the grey rectangle) and for all your tags specify a width: 100%
To position the footer to the bottom, you should give him position: absolute; and bottom: 0px;
To position the Text "Text", use although the css attribute position: absolute and then top: valY px; left: valX px;
All these things done in CSS
Here are some great interactive courses, you maybe want to assgin:
https://www.udacity.com/course/intro-to-html-and-css--ud304
https://www.udacity.com/course/responsive-web-design-fundamentals--ud893
As we can see from the image my content overlaps with the header image and this is the code I have:
<style type="text/css" media="print">
#page {
/*size:landscape;*/
#top-center {
content: element(header);
}
#bottom-left {
content: element(footer);
}
}
div.header {
padding: 10px;
position: running(header);
}
div.footer {
display: block;
padding: 5px;
position: running(footer);
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
</style>
</head>
<div class="header">
<img src="logo.png" title="logo" width="200px"/>
</div>
<div class="content">
</div>
P.S.: Please don't close this question as duplicate as I have already searched all the questions related to the same but mine looks different as PDF is involved.
Headers and footers are established within the page margins.
So the solution is to increase the page top margin, for example:
#page {
margin-top: 50mm;
}
Method to implement header footer properly in PDF
After finding a lot on internet on different solutions and workaround, I'm finally sharing a way that works for me.
Please add these style to report container (the div in which report is rendered).
<div #scrollingContainer class="col-xxs-9 content-container" style="overflow-x: hidden;width:100%;">
</div>
// Div properties may differ
Wrap the Doc component into the table structure with thead and tfoot according to the size of your header and footer(table is wrapped inside a div).
<div style="width: 100%;">
<table style="table-layout: fixed; width: 100%;"> // Add this css to make main table fixed, child tables will still scroll
<thead class="page-break-before">
<tr>
<td>
<div style="height: 80px;"></div> // space for the respective header
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div> Your Data Goes Here........</div>
</td>
</tr>
</tbody>
<tfoot class="show-in-print page-break-after">
<tr>
<td>
<div style="height: 130px;"></div> // space for the respective footer
</td>
</tr>
</tfoot>
</table>
</div>
Sample Header and footer
<div class="page-break-before">
<div>A long header content...</div>
</div>
<div class=" page-break-after">
<p> A long footer content...</p>
</div>
I am making a responsive site for a mobile. The HTML should not be changed but the css should handle the positioning of the elements so as to not effect the main site.
BACKGROUND INFORMATION
The desktop site has a navigation bar set at the bottom of the screen with a contact number below it whilst the site title and logo is placed at the top. For the mobile this is unfeasable so I've put the navigation bar at the top of the screen alongside the title and logo. The number has remained at the bottom as desired. Between the top header and the contact number at the bottom, I have placed the bulk content area. The content is being displayed correctly by using the height:calc(100% - 336px) property to set the content wrapper 100% - the total height of the top header and the contact number. The content wrapper is then set absolute to a position top: 176px to meet the bottom of the top header. The content inside the content wrapper does not fit inside the wrapper so overflow-y:scroll is used to ensure that the user can scroll through the content area.
PROBLEM
The content area within the wrapper is not scrolling.
CODE
CSS
.PageContentBox {
top: 176px!important;
height: calc(100% - 336px);
z-index: 12;
width: 100%;
overflow-y: scroll;
left: 0px!important;
}
#content {
padding: 0;
height: 100%;
overflow-y: scroll; /*This here for testing purposes*/
}
HTML
<div class="PageContentBox">
<div id="content">
<div id="pages">
<div class="page" id="page0">
<h1>HEADER</h1>
<div class="grid grid-pad" style="padding: 0 0 0 0!important">
<div class="row" id="r1">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Applications</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
<div class="row" id="r2">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Performance</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
<div class="row" id="r3">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Specifications</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to set position on your .PageContentBox: top: and z-index don't work unless you define position.
Here is you updated Fiddle with the position set to absolute.
In your question you save already given the solution just use that only.
You have specified that absolute but not used it in css. Just use it and it will work no need to put the #content css.
css should be like this:
.PageContentBox {
position: absolute;
top: 176px!important;
height: calc(100% - 336px);
z-index: 12;
width: 100%;
overflow-y: scroll;
left: 0px!important;
}
See the example
I am getting desktop and mobile view like this and I think its fine. What you say?
I'm having a small issue here, I've made a jsfiddle for you guys to play with it: http://jsfiddle.net/darkguy2008/NQUz8/
The problem I have is that when there is unavoidable long content, the header and footer don't stretch to it, but to the maximum browser window.
I need to find a way to make it stretch, I've had an idea of having the header and footer be part of the content div instead, but if the content is shorter than the browser window they wouldn't stretch to 100% width of the browser window and that's what I don't want.
Also, the title/subtitle of the page can be longer than the content so that wouldn't help either :/
I would love to change the design, but it's for a report website, I can't put it with a margin: 0 auto; because the idea isn't to center the website or to make the reports a fixed width (because they can't, either).
The idea is also to avoid JS. I know I can fix the widths using JQuery, but the project can also be used by external clients so we can't enforce them to use JS. Weird I know but I've seen cases where the stupid sysadmins block JS and we can't do much about it, except to make it work.
I can use HTML5 and CSS3, so if there's a way to do it with those two technologies it would be great :)
Any ideas are welcome!
HTML:
<header>
<div class="wrap">
<table border="0">
<tr>
<td rowspan="2">
<img src="http://dummyimage.com/230x100/000/fff&text=LOGO" align="left" style="border-width:0px;" />
</td>
<td>
<h1>title 1 lololol</h1>
</td>
</tr>
<tr>
<td>
<h2>subtitle omgomgomgomgomg</h2>
</td>
</tr>
</table>
</div>
<div id="menu">menu goes here omg</div>
</header>
<div>contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</div>
<footer>
<div class="wrap">
<p>Footer goes here o.o"</p>
</div>
</footer>
CSS:
/*********************/
/** RESET */
/*********************/
*
{
padding: 0;
margin: 0;
/*border: 0;*/
font-family: Arial;
}
/*********************/
/** Main CSS */
/*********************/
body
{
font-family: Arial;
font-size: 10pt;
}
.wrap
{
position: relative;
margin: 0 0;
width: 640px;
}
header, footer
{
background: #0f6;
float:left;
min-width:100%;
}
#menu
{
min-width: 100%;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
th, td { padding: 0; }
table { border-collapse:collapse; border-spacing: 0; }
Basically you have to include the content and the footer inside your "header" element so your content will make it grow.
HTML
<div>
<header>
<div class="wrap">
<table border="0">
<tr>
<td rowspan="2">
<img src="http://dummyimage.com/230x100/000/fff&text=LOGO" align="left" style="border-width:0px;" />
</td>
<td>
<h1>title 1 lololol</h1>
</td>
</tr>
<tr>
<td>
<h2>subtitle omgomgomgomgomg</h2>
</td>
</tr>
</table>
</div>
<div id="menu">menu goes here omg</div>
<div class="content">contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</div>
<footer>
<div class="wrap">
<p>Footer goes here o.o"</p>
</div>
</footer>
</header>
</div>
Modifications in CSS:
.content
{
background: #FFFFFF;
}
Here is a working fiddle:
Fiddle
As in the last post, use the word-wrap here and set your width to whatever you want it to. I set it for you at 100% but it only goes to whatever the largest width you have. http://jsfiddle.net/NQUz8/2/
<div style="word-wrap:break-word; width="100%;">content here</div>
I would use some type of css class or id if you can. I just used style here to show you how it works.
I've searched around here and elsewhere to for a solution to this problem, but nothing I've tried has worked. The googleplex abounds with samples, but many just don't seem to fit my needs or depend heavily on tricks I can't understand.
Basically, I am trying to create a dashboard. I gave up on .css when I couldn't get things even. I have 3 rows. The most amount of columns per row is 3, and one row will be 2/3 and 1/3, and another row will be 50/50 (top row is 1/3, 1/3 and 1/3). When I couldn't get .css to have the columns even (the third 1/3 was shifting down, or off center from the rest of the row), I switched to .
When there was limited content in the tiles in the dashboard I was able to get the columns/rows distributed evenly (using width/height: 33.3%). If I resized the browser the tiles shrunk to a point where (as expected) if the window was minimized to much left/right only some of the tiles appeared. Not great - I was hoping that even if the content disappeared that I could minimize left/right as far as the browser would let me and see 3 equal columns || || || like that. But ok, no biggie.
Well, I put content in the bottom left tile (3x3 tile grid) and of course it expanded. Now I tried everything (border-collapse, white-space, overflow: hidden, etc.) and still can't get it the way I want.
I am stumped. I understand that at a certain point the browser is going to force things to overflow (lets say arbitrarily this should happen at 800x600), but I was hoping my display would shrink appropriately (tiles get smaller equally) and that the scrollbars inside the tiles would show up on the y-axis (overflow-y) so the user could scroll the text. I even tried 800x600 min/max width/height, but I couldn't get it to work.
Any advice would be appreciated.
This is my html snippet:
<div id="dashboard">
<table cellpadding="0" cellspacing="10">
<tr>
<td class="dashboard-tile onethird">
<div id="Alerts">
<div class="content">
<header> <span>Alerts</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
<td class="dashboard-tile onethird">
<div id="Matters">
<div class="content">
<header> <span>Matters</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
<td class="dashboard-tile onethird">
<div id="RecentActivity">
<div class="content">
<header> <span>Recent Activity</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
</tr>
<tr>
<td class="dashboard-tile onethird">
<div id="Alerts">
<div class="content">
<header> <span>Alerts</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
<td class="dashboard-tile onethird">
<div id="Matters">
<div class="content">
<header> <span>Matters</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
<td class="dashboard-tile onethird">
<div id="RecentActivity">
<div class="content">
<header> <span>Recent Activity</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
</tr>
<tr>
<td class="dashboard-tile onethird">
<div id="Alerts">
<div class="content">
<header> <span>Alerts</span> </header>
<section> Content HereContent Here Content HereContent Here Content Here Content Here Content Here Content Here Content Here Content Here Content HereContent HereContent HereContent HereContent HereContent Here Content Here Content Here Content Here Content HereContent Here Content HereContent Here Content Here Content Here Content Here Content Here Content Here Content Here Content HereContent HereContent HereContent HereContent HereContent Here Content Here Content Here Content Here Content HereContent Here Content HereContent Here Content Here Content Here Content Here Content Here Content Here Content Here Content HereContent HereContent HereContent HereContent HereContent Here Content Here Content Here Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
<td class="dashboard-tile onethird">
<div id="Matters">
<div class="content">
<header> <span>Matters</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
<td class="dashboard-tile onethird">
<div id="RecentActivity">
<div class="content">
<header> <span>Recent Activity</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
</tr>
</table>
</div>
And this is my .css:
#dashboard { height: 100%; }
#dashboard table { height: 100%; width: 100%; border:0; margin: 0px; padding: 0; }
#dashboard table tr { height: 33.3%; }
#dashboard table td { vertical-align: top; height: 33.3%; min-width: 33.3%; min-height: 33.3%; max-width: 33.3%; max-height: 33.3%; overflow: hidden; }
#dashboard table td.onethird { width: 33.3%; }
.dashboard-tile { background-color: #650000; border: 1px solid #790000; }
.dashboard-tile .half {}
.dashboard-tile .twothird {}
.dashboard-tile .full {}
.dashboard-tile .content { margin: 5px 10px; overflow-y: auto; -webkit-overflow-scrolling: touch; color:#fff; }
.dashboard-tile header { font-size: 1.3em; font-weight:bold; width:100%; float:left; padding: 0px 0px 5px 0px; }
.dashboard-tile header span { float: left; text-transform: uppercase; }
.dashboard-tile section { margin-top:35px; }
.dashboard-tile footer{ }
.dashboard-tile footer span { font-weight:bold; }
It's really not clear what you want, but I'm going to try to answer anyway.
It's fairly simple to make a fluid design with thirds and halves.
li{ width:33%; float:left;}
or alternatively,
li{ width:50%; float:left;}
Also, on a small screen, dividing text into three columns is not ideal for legibility. Consider using media queries like this:
#media screen and (max-width:600px){
li{width:100%}
}
To simplify layouts for small screens.
Here is an example of the above concepts.
EDIT:
Here is a slightly different and simplified solution:
html{height:100%;}
body{height:100%;}
div{width:33.333333%; height:33.333333%; float:left; overflow:auto;}
.twothirds{width:66.666666%;}
.half{width:50%;}
Demo