I am having difficulties achieving Css 100% so my website can look right in every web browser. I followed a tutorial I found HERE but no luck in getting it working. I have an example that contains a footer. This footer is also not in place. Also, I am trying to have the surrounding black frame cover my footer. Is there something I am doing wrong?
For better details please look at my
LIVE EXAMPLE
CSS
<style>
html,body {
padding: 0px;
margin: 0px;
background: #333333;
background-size: 100%;
line-height: 130%;
height: 100%
font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif;
font-size: 90%;
color: #5e5e5e;
}
/****** COLORBLOCK: this is the orangey-yellow bar behind the wrapper i the background. ******/
#colorblock {
position: absolute;
top: 60px;
left: 0px;
background: #c69a55;
z-index: -1;
height: 65px;
width: 100%;
padding: 0px;
margin: 0px;
}
/****** WRAPPER: this is the light gray box that is the background for all of the content. DO NOT EDIT. ******/
#container {
z-index: 1;
width: 850px;
position: relative;
margin: 0 auto;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#contentArea{
padding:1em 1em 5em;
min-height:700px;
width: 850px;
position:relative;
background: #f2f2f2;
border-right: 15px solid #000000;
border-left: 15px solid #000000;
position: relative;
}
/****** TOP BANNER: This is the banner with Greg's List logo and main navigation. Also includes the styles for the main navigation links. ******/
#header {
width: 100%;
height: 180px;
}
/****** FOOTER: This is the junk at the bottom of the page. Do NOT remove the clear div; it's what makes it stick to the bottom. ******/
#clear {
clear: both;
margin-bottom: 10px;
}
#addSpace{
padding-bottom:7px;
}
.bottomNav {
margin-right:auto;
margin-left:auto;
width:880px;
height: 200px;
background: #7a7a7a;
}
#footer{color:#FFF; position:absolute; bottom:0; width:100%; padding-bottom:10px; padding-top:10px;}
</style>
to set the footer in place you just need to reset width: 905px; in .bottomNav class
use ( width: calc ) property in css
for example.
u need header 100px and footer 100px with 100% content height
css
body, html{height:100%; margin:0px;}
.header{height:100px;}
.footer{height:100px;}
.content{height: 100%;
height: -webkit-calc(100% - 200px);
height: -moz-calc(100% - 200px);
height: calc(100% - 200px);
}
we set -200 bcoz header height 100px + footer height 100px so 100+100 = 200
Related
I have tried a lot.
I do not get to 100% height without scrollbars:
/* =================== Global =================== */
*{
padding: 0px;
margin:0px;
}
html, body{
height: 100%;
background-color: #7a7a78;
font-size: 11px;
font-family: Verdana, sans-serif;
}
a{
color: #000;
text-decoration:none;
}
header{
max-width: 1000px;
margin: auto;
height: 75px;
background-color: #d0ccc9;
}
nav{
background-color: #964951;
height: 30px;
}
#nav{
max-width: 940px;
height: 30px;
margin: auto;
padding-left: 30px;
padding-right: 30px;
}
section{
margin: auto;
max-width: 970px;
background-color: #d0ccc9;
padding-left: 15px;
padding-right: 15px;
height: 30px;
}
main{
margin-left:auto;
margin-right:auto;
max-width: 970px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
background-color: #d0ccc9;
min-height: 150px;
height: 100%;
}
footer{
padding-left: 15px;
padding-right: 15px;
background-color: #964951;
height: 75px;
color: #fff;
display: flex;
align-items: center; /* Vertikale Zentrierung */
justify-content: center; /* Horizontale Zentrierung */
}
footer a{
color: #fff;
text-decoration:none;
}
enter image description here
enter image description here
can someone tell me what I did wrong?
thank you
edit: sorry, I get the css code not inserted. always the same error although everything is correct
Without seeing the HTML code it's hard to judge, but your main element has height: 100%;. So if there are other elements outside the main element (which is very likely from your CSS), they will add to the height, which will make the overall height more than 100%, which again causes the scrollbars.
Addition after added link to picture of HTML code in comments:
It's as I wrote above: Above main there are header , nav and section, below it, there is the footer. According to the CSS you posted all this adds up to 100% PLUS 210px (210px is the sum of all other heights according to your CSS): There's the overflow that causes the scrollbar.
The solution: Apply height: calc( 100% - 210px) to the CSS rule for main (instead of the 100% height there)
At the top level of my website layout are 4 div tags.
The first one is a full width header section, with css:
#header {
margin-top: 0px;
height: 70px;
border: 4px double rgb(255,255,255);
border-radius: 20px;
background: rgb(88,150,183) no-repeat fixed left top;
padding: 0px;
}
At the bottom is a full width footer:
#footer {
clear: both;
margin: 0px;
color:#cdcdcd;
padding: 10px;
text-align: center;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
On the left is my main menu section:
#categories {
float:left;
width:150px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
All of those 3 elements work fine. They're in the right place and that doesn't change whatever screen resolution the user has on their monitor, or whether they view it on not maximum screen size.
My problem is with the main element of the page - where all the interesting stuff is. It's directly to the right of the menu div - or rather, it should be. My css is:
#main {
float:right;
min-height: 440px;
width: 80%;
margin-bottom: 20px;
padding:20px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
width 80% works OK for most of my users, but for those with less resolution, the main element shifts below the menu, which is ghastly.
What I would ideally like is for the width set in the css #main to be something like (100% - 170px), thus leaving a nice margin between the menu and the main bit at all times and never pushing it below the menu. However, css standards don't fulfil that desire yet!
Could someone suggest how I amend my css to give me a nice clean page that's clean for all my users? Or do I need to go back to setting out my page using tables?
Using CSS3 flex
* { box-sizing: border-box; margin: 0; }
#parent{
display: flex;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
flex: 1; /* You... fill the remaining space */
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Using CSS3 calc
width: calc(100% - 170px);
Example:
* { box-sizing: border-box; margin: 0; }
#aside {
background: #1CEA6E;
width: 170px;
float: left;
padding: 24px;
}
#main {
background: #C0FFEE;
width: calc(100% - 170px);
float: left;
padding: 24px;
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using float: left; and overflow
* { box-sizing: border-box; margin: 0; }
#aside{
width: 170px; /* You, be fixed to 170 */
float: left; /* and floated to the left */
padding: 24px;
background: #1CEA6E;
}
#main {
background: #C0FFEE;
padding: 24px;
overflow: auto; /* don't collapse spaces */
/* or you could use a .clearfix class (Google for it) */
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using style display: table;
* { box-sizing: border-box; margin: 0; }
#parent{
display: table;
border-collapse: collapse;
width: 100%;
}
#parent > div {
display: table-cell;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Is this what you are looking for? You don't need any css3
Dont need any css3
.wrapper {
width: 800px;
height: 800px;
background-color: blue;
}
.content {
width: auto;
height: 100%;
background-color: yellow;
}
.menu {
width: 170px;
height: 100%;
float: left;
background-color: red;
}
<div class="wrapper">
<div class="menu">Menu</div>
<div class="content">
Aside
</div>
</div>
You can use 'calc' function supported by all modern browsers and IE9+, or switch to flexbox (supported by IE11+)
See this pen: https://codepen.io/neutrico/pen/MyXmxa
width: calc(100% - 170px);
Keep in mind that all borders matter unless you set 'box-sizing' to 'border-box' (or just remove these borders and apply them on child elements).
I'm having trouble eliminating the vertical scrollbar when applying a 50px padding (black) to the .background style.
html, body {height:100%; margin: 0; padding:0;}
div.background
{
width: 500px;
height: 100%;
background-color: black;
padding: 50px;
}
div.transbox
{
width: 100%;
height: 100%;
background-color: #ffffff;
position: relative;
background-color: rgba(255,255,255,0.3);
}
div.transbox p
{
margin: 50px;
position: absolute;
bottom: 0;
color: white;
}
This is what it looks like
http://jsfiddle.net/sm6LLgp4/2/
If I remove the top and bottom padding (black), the scrollbars are gone, but I've also lost my padding:
http://jsfiddle.net/sm6LLgp4/3/
How can I maintain the 50px padding all around without the vertical scrollbar?
Insert box-sizing:border:box, than it works.
*{
box-sizing:border-box;
}
EDIT: jsfiddle
I have set
html{
height: 100%;
}
And
body{
min-height: 108%;
}
I want to show the content to full height to the footer even if content is empty.
This is container
And this is content
You can fix this by adding height:100% in addition to the min-height:108% to you body element:
http://jsfiddle.net/C8UUt/1/
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
min-height: 108%;
height: 100%;
}
Update
To make the sidebar1 full height you can use a little trick:
http://jsfiddle.net/C8UUt/3/
.container {
width: 960px;
background: #FFF;
margin: 0 auto;
min-height: 100%;
position: relative; // added this to tell position:absolute that this is his parent
}
.sidebar1 {
float: left;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
display: inline-block;
height: 100%; // to make it 100% height
position: absolute; // added this so it will take `min-height` of parent into account
}
.content {
padding: 10px 0;
width: 780px;
display: inline-block;
/* float: left; */
height: inherit;
margin-left: 180px; // since position:absolute doesn't take part in the normal flow, we must account for that space manually
}
if your browser supports CSS3 use this:
.container {height:100vh;}
We have to support the last two revisions of IE, Chrome and Firefox and I have a feeling this isn't possible with IE 7/8, but perhaps I'm missing something
I have a footer that is moved up behind a content area by -280px. This content area is moved up over a header area by -230px. As a result I have a blank area at the bottom of my page of approx 320px. I can fill this and make it appear to be the bottom end of the gradient, but I'd really rather just cut it out, so there's no scroll bar to nothing.
In the example code below -
<div id = "page">
<div id = "topbar">
</div>
<div id = "header">
</div>
<div id = "content">
</div>
</div>
<div id = "footer">
I AM THA FOOTAH<br/> So much cooler than the header these days
</div>
body
{
/* background-color: #040e22; */
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
div
{
display: block;
}
#page
{
background-color: white;
margin: 0px auto;
padding: 0px;
position: relative;
}
#topbar
{
height: 60px;
background-color: #112247;
color: white;
position: static;
}
#header
{
background-color: navy;
color: yellow;
height: 240px;
position: relative;
}
#content
{
min-height: 280px;
background-color: green;
width: 480px;
margin: auto;
position: relative;
top: -230px;
z-index: 1;
height: 2000px;
}
#footer
{
/*background: url("footerGradient.png") repeat-x 50% 0%;*/
background-color: navy;
color: white;
text-align: center;
padding-top: 60px;
height: 220px;
top: -280px;
position: relative;
}
.inner
{
width: 940px;
margin: auto;
}
how do I get rid of the white under the navy footer?
just change in your #footer from top: -280px to margin-top: -280px voila!
position relative will move the element relatively to its original location but will perserve its space thus rendering empty area, negative margin will move your element including its bounding space and will do what you need.
You can change the footer position from relative to static like so:
#footer
{
/*background: url("footerGradient.png") repeat-x 50% 0%;*/
background-color: navy;
color: white;
text-align: center;
padding-top: 60px;
height: 220px;
bottom: 0px;
width: 100%;
position: fixed;
}
You might want to take a look at this sticky footer page-- you can modify that technique by NOT making the height of the footer and the negative margin of the previous element the same; you would want the negative margin to be greater.