I'm trying to create a very simple page that contains a container, a header, a left column and a footer:
<containter>
<header />
<content />
<leftBar />
<footer />
</containter>
I want to use the 100% of the height, as I can do with the width, but I simply dont get it work.At his moment I'm using min-height, but how could I use the height:100%` ? What I like is that the footer is always visible, and you scroll the content.
Current CSS
body
{
font-family: Verdana;
font-size: 0.8em;
background-color:#f1f1f1;
}
#container {
border:solid 2px Black;
position:absolute;
left:10%;
width:80%;
margin:auto;
}
#header {
height:20px;
background: #DDDDDD;
}
#leftBar {
width: 20%;
background: #669966;
min-height:600px;
postion:absolute;
top:20px;
bottom:20px;
}
#content {
float:right;
background-color: #cdcde6;
position:absolute;
left:20%;
right:0px;
bottom:20px;
top:20px;
padding:5px;
}
#footer {
position:absolute;
height:20px;
}
/**
* The following allows the usage of height=100% in body tag.
* Creds to: http://apptools.com/examples/tableheight.php
*/
html,body
{
margin : 0;
padding : 0;
height : 100%;
border : none;
}
You need to make it so html and body take 100% of the browser viewport.
I´m not sure if this is exactly what you are asking for, but it is a good resource when it comes to css layout http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts. It also has an article explaining how to add it into a container: http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
html, body { margin: 0 auto; height: 100%; }
#container { height: 100%; width: 80%; background: #e0e0e0; margin: 0 auto;}
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>
http://jsbin.com/uyezu
Trick is to expand html,body to 100%
I've actually just fixed a similar problem myself this evening, and the following link provided the perfect solution:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Hope it helps.
I've been using this for years, still works great:
footerStickAlt: A more robust method of positioning a footer
http://www.themaninblue.com/writing/perspective/2005/08/29/
Related
I am working on a web project and need to design an HTML page. I want to set the element's height to a percentage to make it better fit the page.
When I use float in CSS and set:
body, html{
height: 100%;
width: 100%
}
It doesn't work with height. I temporarily fixed it by changing the position rather than using float. I want to to why it doesn't work. And anyone can help me?
This is the faulty code:
html, body{
width: 100%;
height: 100%;
margin: 0;
}
#test1, #test2{
display:inline-block;
height: 100%;
width:30%;
}
#test1{
float:left;
background: #111111;
}
#test2{
float:right;
background: #009A61;
}
#test3{
display:inline-block;
height: 100%;
width:40%;
background: cornsilk;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<div id="test1"></div>
<div id="test3"></div>
<div id="test2"></div>
</body>
</html>
Exclude the above codes, the result following:
detail image
It shouldn't appear white section in the bottom.
Your three divs are each 1 viewport high, but the #test3 div is inline-block, so it creates a line box in which it sits. All line boxes contain a strut, the baseline of which is vertically aligned with the bottom of the #test3 div, and the descender part of the strut hangs down below this. The vertical scroll bar is created to show the document to the bottom of the strut, showing the additional height as a white gap.
To fix, just detach the vertical alignment of the strut, from that of the #test3 div by making the #test3 div vertical-align:top.
html, body{
width: 100%;
height: 100%;
margin: 0;
}
#test1, #test2{
display:inline-block;
height: 100%;
width:30%;
}
#test1{
float:left;
background: #111111;
}
#test2{
float:right;
background: #009A61;
}
#test3{
display:inline-block;
height: 100%;
width:40%;
background: cornsilk;
vertical-align:top;
}
<div id="test1"></div>
<div id="test3"></div>
<div id="test2"></div>
Add an empty block level element and use clear: both; before the parent element ends, which holds floated elements, now this one is cheap solution to clear your floating elements which will do the job for you but, I would recommend not to use this.
From here
html, body{
width: 100%;
height: 100%;
margin: 0;
}
#test1, #test2{
display:inline-block;
height: 100%;
width:30%;
}
#test1{
float:left;
background: #111111;
}
#test2{
float:right;
background: #009A61;
}
#test3{
display:inline-block;
height: 100%;
width:40%;
background: cornsilk;
}
.clear {
clear: both;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<div id="test1"></div>
<div id="test3"></div>
<div id="test2"></div>
<div class="clear"></div>
</body>
</html>
Did this work? I didn't see the problem or might not have understood it correctly
So I made a contact page and I want the footer div to be sticking to the bottom of the page not right after the contact form.
But if I put everything to a container div with height:100%; and make footer bottom:0; then the page will be "too long", you have to scroll, etc...
My css so far:
#footer{
background-color:#fff;
font:bold 14px;
color:#1E88E5;
width:100%;
height:auto;
padding:1%;
border-top:1px solid #1E88E5;
}
Footer is just a normal full width div with some centered text atm.
You can probably use position: fixed to achieve this.
.footer {
position: fixed;
bottom: 0;
}
With this you will need to offset the bottom of the page so would suggest adding a padding-bottom to .main that is the height of the footer.
.main {
padding-bottom: 30px /*whatever the height of your footer is*/
}
Pritesh Gupta's solution works really well for me:
I'm copy+pasting the code in case their site goes down:
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Sticky Footer</title>
</head>
<body>
<main>stuff</main>
<footer>© 2016</footer>
</body>
</html>
Here's the CSS:
body {
margin: 0;
}
main {
min-height: calc(100vh - 4rem);
}
footer {
height: 4rem;
}
I don't know if it works in old browsers but I'm not so worried about that myself.
It also depends on you knowing the height of your footer, although it's worth pointing out that you don't necessarily have to set the height manually like in the code above since you can always figure out what it is if you know how much vertical padding and line-height the contents have...
Hope this helps, I spent most of the morning trying every single sticky footer tutorial on the web before stumbling across this technique and whilst other techniques do work this one requires minimal effort.
If you need sticky footer you can make it with 2 solutions.
Solution 1:
HTML:
<div class="wrap">
Content
</div>
<div class="footer">
Sticky Footer
</div>
CSS:
body, html, .wrap{
height:100%;
}
body > .wrap{
height:auto;
min-height:100%;
}
.wrap:after {
content: "";
display: block;
height: 100px;
}
.footer{
background:#662e8c;
margin-top:-100px;
height:100px;
color:#fff;
position:relative;
line-height:180%;
padding:0 10px;
}
Example: https://jsfiddle.net/ta1amejn/
Solution 2 (With table properties):
HTML:
Content
Footer
CSS:
body{
display:table;
width: 100%;
}
html, body{
height:100%;
}
.main{
height:100%;
width:100%;
padding-bottom:20px;
background:#eee;
display:table-row;
}
.footer{
/*height:30px;*/
line-height:30px;
width:100%;
background:#00f0ad;
display:table-row;
}
Example: https://jsfiddle.net/zbtaoq1b/
If you want a fixed footer use this solution:
.footer{
position: fixed;
bottom: 0;
}
You can do that easily with the display: flex.
You don't care about height body or wrapper tag.
Example: Please change the height of main tag any value if you want, footer always sticky to bottom(not position: fixed).
https://codepen.io/tronghiep92/pen/dzwRrO
HTML markup
<div id="wrapper">
<header>my header</header>
<main>main content, please change height</main>
<footer>
my footer
</footer>
</div>
CSS Solution
#wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
height: 100px;
background: yellow;
}
footer {
height: 50px;
background: red;
margin-top: auto; /* this is the solution */
}
main {
height: 100px
}
Or you can:
#wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
header {
height: 100px;
background: yellow;
}
footer {
height: 50px;
background: red;
}
main {
flex: 1;
height: 100px;
}
I can't seem to get a image to align vertically in the header. It aligns horizontally but It is a little too far towards the top of the header.
The html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home_style.css">
</head>
<body>
<div class="header">
<div class="search_bar">
<input type="text" name="search" placeholder="Search magical instruments, tricks, books and more">
</div>
<div class="user_settings">
<img src="onebit_09.png" width="48px" height="48px">
</div>
</body>
</html>
The css:
html,body{
height:100%;
min-height:100%;
width:100%
min-width:100%;
}
.header{
margin-top:0;
margin-bottom:0;
height:10%;
width:100%;
background-color:#343430;
}
.search_bar input[type="text"]{
position:absolute;
left:20%;
top:4%;
width:27%;
padding:5px;
padding-right:50px;
outline:none;
border: 2px solid #9C4B8F;
border-radius: 5px;
background-color:#FBFBFB;
font-family: Cambria, Cochin, Georgia, serif;
font-size: 16px;
color:grey;
background-image: url('search.png');
background-position: 100% -10px;
background-repeat:no-repeat;
}
.search_bar input[type="text"]:focus{
background-color:#FFFFFF;
border-color:#333333;
}
.user_settings img
{
position:absolute;
top:5%;
left:95%;
height:48px;
width:48px;
margin:-24px 0 0 -24px;
}
The image that I'm trying to position is a little settings cog(user_settings) that is 48px wide and 48px high.
Here is a workaround:
#elementToAlignVertically
{
margin-top:50%;
transform:translate(0px,-50%);
-ms-transform:translate(0px,-50%);
-moz-transform:translate(0px,-50%);
-webkit-transform:translate(0px,-50%);
}
Basicaly you align the element 50% from the top and then use the translate to move it -50% of it's hight so it will center it self.
Probably you'll also have to set the height of the element for it to work or instead of percent use pixels that you want to move the element upwards.
there is a property vertical-align in css which can be valued at varied contents. Check this w3schools tuts.
Vertical-align property
I fixed the problem, I had forgotten to set the padding and margin of the html,body elements to 0. This caused a small white gap at the top of the screen that made it seem like the image was not positioned correctly. Sorry for the inconvenience the corrected code should look like:
html,body{
height:100%;
min-height:100%;
width:100%
min-width:100%;
margin:0;
padding:0;
}
Try using calc for that it will not work in all browser but in some of them will do:
.user_settings img
{
position:absolute;
top:5%;
left:95%;
height:48px;
width:48px;
margin-top: calc(50% - 24px);
margin-top: -webkit-calc(50% - 24px);
margin-top: -moz-calc(50% - 24px);
}
or you can try the margin auto:
.user_settings img
{
position:absolute;
top:0;
bottom:0;
left:95%;
height:48px;
width:48px;
margin-top: auto;
}
Or still my favorite and most reliable is to use some javascript to manipulate the position.
For example jQuery something like:
$(".user_settings img").css('top',$(".user_settings).height()/2-24);
Then make sure you also add a resize watcher like this:
$(window).on('resize', function(){
$(".user_settings img").css('top',$(".user_settings).height()/2-24);
});
In the near future (right now has like the 70% of the browser support) you can do this, a much simpler and elegant solution:
.container img{
width: 100%;
height: auto;
}
#supports(object-fit: cover){
.container img{
height: 100%;
object-fit: cover;
object-position: center center;
}
}
I have the following html:
<body>
<div id="page">
<div id="header"></div>
<div id="content"></div>
</div>
</body>
and css:
html,body {
margin:0;
padding:0;
height:100%;
}
#page {
height:100%;
margin:auto;
left:0;
right:0;
width:500px;
}
#header {
height:100px;
width:500px;
}
#content {
width:500px;
height:100%;
}
The problem is that content div is the height of the window + the height of the header.
How can i make it to be the height of the window - the height of the header, I mean to stretch horizontally all over the remaining window. ??
In case you don't need to support IE7 and below - you can use a useful trick with
position: absolute
for #header and
padding-top: 100px;
box-sizing: border-box;
for #content.
Check out this fiddle: http://jsfiddle.net/Jx4sC/2/
Details regarding box-sizing support: http://caniuse.com/#feat=css3-boxsizing
You could use calc() in modern browsers and let the browser calculate the height of your content box:
#content {
width:500px;
height: calc(100% - 100px);
}
Similarly you could use some JavaScript to do the same. But then make sure to update your calculations each time the browser height gets changed.
This is supprisingly hacky to get going and you may not have to do it. for example, say you wanted to give #content a background-color, put it on #page instead.
html,body {
margin:0;
padding:0;
/* body should have height:100% by default */
}
#page {
height:100%;
margin: 0 auto;
width:500px;
/* use page as you would have used #content*/
}
#header {
height:100px;
}
#content {
}
edit: but if you really need to do this, you can do it like so
#page {
position: relative;
}
#content{
position: absolute;
top: 100px;
bottom: 0px;
left: 0px;
right: 0px;
}
this is not ideal because if you wanted to make #header bigger you need to remember to update #content, you can no longer use the normal page layout
Say I have div that is a specified width of 200px. Then I have 3 h1 elements in that div with different amounts of letters / different widths. How do I stretch them horizontally to fill the div?
<div id="Header">
<div class="Logo"><h1>CORROBORREE</h1><br><h1>FROG</h1><br><h1>PROJECT</h1></div>
What I need is the words to be same width---the width of the containing div.
I tried text-align justify on the h1 but that didn't do any good.
.Logo {
margin-left: 100px;
height:auto;
width: 250px;
background-color:#666;
font-family: Impact, Charcoal, sans-serif;
text-align: justify;
}
.Logo h1 {
font-size: 40;
text-align:justify;
display: inline;
}
I don't think there's a pure CSS way to do it as of now (I mean using some straight CSS way, you need to juggle things around), what you can do is use nth-of-type in CSS and give letter-spacing to each.. this way you don't have to declare classes for each h1 and also you'll get stretched text
Demo
<div class="Logo">
<h1>CORROBORREE</h1>
<br />
<h1>FROG</h1>
<br />
<h1>PROJECT</h1>
</div>
html, body { /* Using this or not depends on you,
nothing to do with the example */
width: 100%;
height: 100%;
}
.Logo {
background: #f00;
width: 300px;
}
.Logo h1:nth-of-type(1) {
letter-spacing: 4px;
}
.Logo h1:nth-of-type(2) {
letter-spacing: 70px;
}
.Logo h1:nth-of-type(3) {
letter-spacing: 25px;
}
Why you want to do it, I don't know, cuz this will look super weird
Use letter-spacing
eg: letter-spacing:20px
Check this out:
Demo
CSS:
#Header{
width:200px;
height:200px;
background-color:grey;
overflow:hidden;
}
#h1{
-webkit-transform:scaleX(0.78);
margin:0 0 0 -25px;
}
#h2{
-webkit-transform:scaleX(2.3);
margin:0 0 0 70px;
}
#h3{
-webkit-transform:scaleX(1.3);
margin:0 0 0 25px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="Header">
<div class="Logo"><h1 id='h1'>CORROBORREE</h1><br><h1 id='h2'>FROG</h1><br><h1 id='h3'>PROJECT</h1></div></div>
</body>
</html>
text-align:justify and display:block.
And there can be only the one h1-tag on one page