I wanted to make a 15% height header and footer, and for the rest height should be main (with image). But unfortunately, the image is going too big and I don't know how to resize it to 100% width (of #all div) and 70% (of #all div).
Would appreciate any help.
The image as how it looks now.
html,
body {
margin:0;
padding:0;
height:100%;
width: 100%;
}
#all {
position:relative;
width: 60%;
height:100%;
margin: auto;
}
header#main-header{
display: block;
position: absolute;
background:#ff0;
height: 15%;
width: 100%;
z-index: 10;
}
#main {
display: block;
position: absolute;
top: 15%;
height: 30%;
}
footer{
display: block;
position:absolute;
bottom:0;
width:100%;
height:15%; /* Height of the footer */
background:#6cf;
z-index: 10;
}
try to use #main img {display:block; width:100% }
Also, I recommend you to use class instead id.
Related
I have big doubt about fixed, relative , absolute container
I have a css code like this
.header {
position:fixed;
width:100%;
height:60px;
}
.page, .footer {
position:relative;
width: 80%;
min-width: 980px;
max-width: 1366px;
}
and my html code like this...
<div class="header">--fixed content--</div>
<div class="page">--page content</div>
<div class="footer">--footer content--</div>
I have used bootstrap for button styles. problem is the header div is fixed but the content inside the page & footer goes over the header content. When I remove position:relative; from page & footer css it works fine. But also bootstrap buttons goes still goes up.
try this:
.header {
position:fixed;
width:100%;
height:60px;
background: black;
color: white;
top: 0;
left: 0;
z-index: 10;
}
.page {
position:relative;
width: 80%;
min-width: 980px;
max-width: 1366px;
background: #999;
height:500px;
color: white;
padding-top: 60px;
margin: auto;
}
.footer {
position:relative;
width: 80%;
min-width: 980px;
max-width: 1366px;
background: #666;
height:100px;
color: white;
margin: auto;
}
Fiddle Example
Adding a z-index will keep your header always on top of other content. You can change its value as per your content.
add the padding-top to your '.page' to avoid any overlapping of header on the body content.
You should be using like this:
.header {
position:fixed;
width:100%;
height:60px;
z-index: 99999999;/*adding higher index value than other divs*/
/* This will ensure the header div always on top of other divs */
}
.page{
position: relative;
top: 61px;/* plus 1px height as of .header or use as per your requirement */
/* but at least this should be 60px to show your .page div */
}
Then, just other divs you don't need to define the top value for this issue(overlaps).
Basically I have this layout
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer">
<img src="" alt=""/>
</div>
</div>
And this CSS
#container {
height: 100%;
}
#header {
height: 8%;
}
#footer img {
width: 100%;
height: auto;
}
As you can see, the image in the footer has set width and relative height, which means the height of the footer will be whatever the height of the image will be depending on the screen width.
I need to stretch the content to the remaining height so the combined height of header, content and footer equals the height of the screen (no vertical scrolling).
I can easily do it with flexbox but I'm developing an app using Meteor.js and it will run in an environment, where flexbox might not be supported (older Android versions).
What you're looking for is known as "sticky footer".
WITHOUT FLEXBOX
This version is based on this answer
STANDARD DEMO
html, body {
height: 100%;
margin:0;
}
#container{
display: table;
height: 100%;
width: 100%;
background: yellow;
}
#content{
display: table-row;
/* height is dynamic, and will expand... */
height: 100%;
/* ...as content is added (won't scroll) */
background: turquoise;
}
#header {
height: 8%;
}
h1{
margin:0;
padding:0;
}
#footer img {
width: 100%;
height: auto;
}
#footer{
color:lightgrey;
display: table-row;
}
WITH FLEXBOX
This version is based on this article
FLEXBOX DEMO
html, body, #container {
height: 100%;
}
#container{
display: flex;
min-height: 100vh;
flex-direction: column;
}
#content{
flex: 1;
background:tomato;
}
#header {
height: 8%;
}
h1{
margin:0;
padding:0;
}
#footer img {
width: 100%;
height: auto;
}
#footer{
color:lightgrey;
}
You could use CSS tables to accomplish this. Make #container display:table and the sub-divs display:table-row. Then if header and footer have a height, the content height will adjust accordingly. In this case, the height of #header is explicitly 8% and the height of #footer is determined by the height of the image.
html, body, #container {
height: 100%;
padding: 0;
margin: 0;
}
#header, #content, #footer {
display: table-row;
}
#container {
display: table;
width: 100%;
}
#header {
height: 8%;
background-color: blue;
}
#content {
background-color: yellow;
}
#footer {
background-color: green;
}
#footer img {
width: 100%;
}
Here's an example on jsfiddle. Try adjusting the width and height of the result window.
I got my footer to touch the bottom of the page all time by using the following css
footer {
width: 100%;
bottom: 0;
position: fixed;
}
Now I want to know how to make the section and aside touch the top of the footer at all times. I am using the following as style directives for the section and aside.
section {
float: left;
background-color : red;
width : 80%;
}
aside{
width : 20%;
float : left;
background-color : green;
}
If I give height some particular pixel value it will not render correctly in some other screen size.
What should I use in addition so the height is responsive and covers the area from header to footer all the time in all the various sizes of screen, wherever the page is going to be rendered? Any hint which will help me come out of this will be highly appreciated.
These are based upon the Aside being 20% width and the Footer being 20% height. You can adjust accordingly. For the scrolling one, just remove the height attributes to allow it to be dynamic, but I would put a min-height:80%; on them just in case :). You don't need any of these silly wrappers ;).
Non-Scrolling
position:fixed; all elements and lay them out using top, left, right and bottom percentages to suit.
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
footer {
width: 100%;
bottom: 0;
position: fixed;
top:80%;
background-color:orange;
}
section {
position: fixed;
top:0;
left:20%;
right:0;
bottom:20%;
background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
}
aside {
position: fixed;
top:0;
left:0;
right:80%;
bottom:20%;
background: linear-gradient(to bottom, rgba(241,218,54,1) 0%,rgba(254,252,234,1) 100%);
}
<aside></aside>
<section></section>
<footer></footer>
Scrolling
Add padding-bottom to the aside and section of the same value as the height of the footer.
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
footer {
width: 100%;
bottom: 0;
position: fixed;
top:80%;
background-color:orange;
}
section {
float: left;
background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
width : 80%;
height:100%;
padding-bottom:20%;
}
aside {
width : 20%;
float : left;
height:100%;
background: linear-gradient(to bottom, rgba(241,218,54,1) 0%,rgba(254,252,234,1) 100%);
padding-bottom:20%;
}
<aside></aside>
<section></section>
<footer></footer>
i would suggest that you use a wrapper for your whole footer.
like this:
//this is the fixed block
.wrapper {
position: fixed;
display: block;
width: 100%;
bottom: 0;
left: 0;
}
.aside {
position: relative;
width: 80%;
height: 100px;
background: yellow;
display: inline-block;
}
.section {
position: relative;
width: 19%;
display: inline-block;
height: 200px;
background: blue;
}
.footer {
position: relative;
width: 100%;
display: inline-block;
height: 200px;
background: black;
}
<div class="wrapper">
<div class="aside"></div>
<div class="section"></div>
<div class="footer"></div>
</div>
I have a fixed header and footer with a height of 50px. However, when I scroll the page, the page content overlaps the fixed header and footer. How can I hide the page as it scrolls into the header and footer (the top 50px)?
This can only be done in HTML/CSS. If it takes JS or JQ to perform this, then I will forget about doing this.
CSS
header {
height: 50px;
position: fixed;
}
.page {
position: relative;
}
.sidebar {
float: left;
position: fixed;
width: 220px;
}
.main {
float: right;
width: 740px;
}
footer {
position: fixed;
height: 50px;
}
HTML
<header>
This content should stay on top.
</header>
<div class="page">
<div class="sidebar">This content should not move when using scroll bars.</div>
<div class="main"></div>
</div>
<footer>
This content should stay on bottom.
</footer>
Try adding a value to your footer for example
bottom: 0;
Check this fiddle: http://jsfiddle.net/d7T83/
EDIT
Or you can specify a height for your page element
.page {
position: relative;
display:block;
height: 50px;
}
Demo
css
body, html {
height: 100%;
margin:0;
padding:0;
}
header {
top:0;
height: 50px;
position: fixed;
left:0;
right:0;
background: #ccc;
z-index:2;
}
.page {
position: relative;
background: #eee;
z-index:1;
height: 100%;
}
.sidebar {
left:0;
position: fixed;
width: 220px;
top:50px;
bottom: 50px;
background: #ddd;
height: calc(100% - 100px);
}
.main {
float: right;
width: calc(100% - 220px);
height: 100%;
background: red;
margin:50px 0;
}
footer {
position: fixed;
height: 50px;
bottom:0;
left:0;
right:0;
background: #aaa;
z-index:2;
}
I think what you are looking for would be this -
header {
top: 0;
height: 50px;
position: fixed;
display:block; /* fill the width */
z-index:2; /* z-index greater than .main */
width:100%; /* fill the width */
background-color: white; /* To make it opaque */
}
.page {
position: relative;
}
.sidebar {
top: 50px;
float: left;
position: fixed;
width: 220px;
}
.main {
margin-top: 50px;
float: right;
left: 220px;
width: 740px;
z-index:1; /* z-index lesser than header and footer */
}
footer {
position: fixed;
height: 50px;
bottom: 0;
display:block; /* fill the width */
z-index:2; /* z-index greater than .main */
width:100%; /* fill the width */
background-color: white; /* To make it opaque */
}
See example here - http://jsfiddle.net/7V57P/5/
For the header, just give a margin top to the page content. For the footer and header Give them a z-index that is higher than the page div to ensure that it overlaps the content.
header {
height: 50px;
position:fixed;
top:0px;
left:0px;
z-index:4;
background-color:orange;
}
.page {
margin-top:40px;
}
.main {
float: right;
width: 740px;
}
footer {
position: fixed;
bottom: 0px;
height: 50px;
background-color:orange;
z-index:4;
}
DEMO FIDDLE
I need the following to happen in my website:
The counter and logo (top, bottom) should always have the same height and stay on the top and bottom even though the screen height will decrease/increase. BUT the 2 other divs in between should get smaller/bigger when the window changes. I hope with this example its easier to understand:
The logo will disappear when the screen height is too low, right now. Here is the css:
The section is 80% width and aside 20%, but that doesnt really matter here...
#countdown{
padding: 0.5em 0.5em 0.5em 3em;
margin: 0.5em;}
#addProject{
margin: 0.5em;
padding: 0 1em;
height: 44%;
overflow-y: auto;}
#Nye{
margin: 0.5em;
padding: 0 1em;
overflow-y: auto;
height: 40%;
}
#logo{
margin: 1em;
height: 5em;
}
#Rémi offered a good start, but I would recommend using position: fixed.
This will anchor your elements to the browser window, regardless of the amount of your content.
e.g.:
.counter, .middle1, .middle2, .logo {
position: fixed;
width: 20%;
min-width: 200px;
right:0;
}
.counter {
background: yellow;
top:0;
height: 50px;
}
.middle1 {
overflow: scroll;
background: blue;
top:50px;
bottom: 50%;
}
.middle2 {
overflow: scroll;
background: green;
top: 50%;
bottom:50px;
}
.logo {
background: pink;
bottom:0;
height: 50px;
}
See http://jsfiddle.net/uKPEn/1/
It's a little tricky but I discovered by doing it that it is actually doable without javascript. Here is a fiddle to illustrate it http://jsfiddle.net/2LyUy/3/
You have to do 3 things:
wrap your two middle divs in a new div, for example with id="wrap".
put a different position attribute on your aside (for example "relative", which will actually not move your div at all)
then have fixed size counter and logo
The css gives that (don't forget to wrap your 2 middle divs with a new one):
aside#test { position: relative; }
/* so that the "absolute" below work as expected */
/* any of "relative" "absolute" or "fixed" positioning would work here, depending on the needs */
#countdown {
position: absolute; left:0; right:0; /* could be factored out if preferred */
top:0; height: 150px;
}
#logo {
position: absolute; left:0; right:0;
bottom:0; height: 50px;
}
#wrap {
position: absolute; left:0; right:0;
top:150px; bottom: 50px;
}
#addProject {
position: absolute; left:0; right:0;
top:0; height:50%;
}
#Nye {
position: absolute; left:0; right:0;
bottom:0; height:50%;
}
Here is the div wrapping code extract:
</div></div>
<div id="wrap"> <!-- added -->
<div id="addProject"
....
<br>
</div>
</div> <!-- added -->
<div .... id="logo"></div>