I have html page ,container div contain header ,content and footer div ,the html cod and css code is like this:
HTML-Code:
<html>
<div class="container">
<div class="header"></div>
<div class="content">
<div class="content2"></div>
</div>
<div class="footer"></div>
</div>
</html>
Css code:
header{
padding-bottom:5px;
width:100%;
position:fixed;
top:0;
z-index:100;
height:70px;
background-color:#006}
.content{
min-height: 100%;
width:100%;
background-color:#006;
margin-top:70px;
margin-bottom:60px }
.content2{
margin:auto;
min-height: 100%;
width:95%;
background-color:#FFFEA5;
padding-bottom: 20px;
}
.footer{
text-align:center;
width:100%;
position:fixed;
bottom:0;
z-index:100;
height:70px;
background-color:#006}
I want the content2 div be full screen either it didn't contain anything ,i did codes above but didn't work ,it is appear like attached image.
Maybe you could try to put all those divs to a parent div like and set to that div 100% width and height(height is not necessary, it will set 100% too) and then you will have div container occupying all screen.
I believe you are missing and need body tag (among other things) which will set whole background to blue.
body{
background-color:#006
}
header{
padding-bottom:5px;
width:100%;
position:fixed;
top:0;
z-index:100;
height:70px;
background-color:#006}
.content{
min-height: 100%;
width:100%;
background-color:#006;
margin-top:70px;
margin-bottom:60px }
.content2{
margin:auto;
min-height: 100%;
width:95%;
background-color:#FFFEA5;
padding-bottom: 20px;
}
.footer{
text-align:center;
width:100%;
position:fixed;
bottom:0;
z-index:100;
height:70px;
background-color:#006}
<html>
<body>
<div class="container">
<div class="header"></div>
<div class="content">
<div class="content2">test</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
Thank you for all of you ,i changed css files and made it like this ,and it is works now :
.header{
padding-bottom:5px;
width:100%;
position:fixed;
top:0;
z-index:100;
height:70px;
background-color:#006}
.footer{
text-align:center;
width:100%;
position:fixed;
bottom:0;
z-index:100;
height:70px;
background-color:#006}
.content{
min-height: 100%;
width:100%;
background-color:#FFFEA5;
margin-top:70px;
margin-bottom:60px }
.content2{
height: 100%;
margin:auto;
width:95%;
background-color:#FFFEA5;
padding-bottom: 80px;
}
.wrapperDiv{
background-color: #006;
padding:0;
margin:0;
height: 100%;
}
Related
.top{
width:100%;
height:50vh;
background-color:red;
}
.bot{
width:100%;
height:50vh;
background-color:black;
}
.content{
position:relative;
width:50px;
height:50px;
background-color:white;
left: 0px;
bottom:0px;
}
<div class='top'>
<div class='content'>
</div>
</div>
<div class='bot'>
</div>
content is not laying on the inner bottom of the first div .top, why not position:relative bottom:0px works , while positioning on absolute it comes in bottom of the screen , so can I lay that div on the bottom of the first div .top using position absolute, content width height have to change though.
Add position: relative to .top and set position: absolute to .content
.top{
width:100%;
height:50vh;
background-color:red;
position:relative;
}
.bot{
width:100%;
height:50vh;
background-color:black;
}
.content{
position:absolute;
width:50px;
height:50px;
background-color:white;
left: 0px;
bottom:0px;
}
<div class='top'>
<div class='content'>
</div>
</div>
<div class='bot'>
</div>
bottom 0px not works with position relative , and if you want to do with postion relative i found a solution for you
.top{
width:100%;
height:50vh;
background-color:red;
}
.bot{
width:100%;
height:50vh;
background-color:black;
}
.content{
position:relative;
width:50px;
height:50px;
background-color:white;
left: 0px;
bottom: calc(-100% + 50px);
}
<div class='top'>
<div class='content'>
</div>
</div>
<div class='bot'>
</div>
This is what I've tried so far:
.content{
margin-bottom: 50px;
}
.bottom{
position:absolute;
height:50px;
line-height: 50px;
bottom:0;
width:80%;
background:green;
}
<div class="content">
......
</div>
<footer class="bottom">
<p>
this is always at bottom
</p>
</footer>
Here is a Fiddle is an example too.
Did someone know why this happen, and how I can solve it?
Thank you!
1.You have make small change in CSS.According to your demo link.
.parent {
height:1500px;
width:200px;
border:1px solid grey;
position: relative;
background-color: white;
}
.topDiv {
display:block;
background:silver;
width:100px;
height:100px;
position:absolute;
top:0;
left:0
}
.bottomDiv {
background:red;
width:100px;
height:100px;
position:absolute;
bottom:0;
}
body {
height:1500px;
background: linear-gradient(#111, #777);
}
You have to use position:fixed, to achieve this !!
CSS
<style type="text/css">
.content{
margin-bottom: 50px;
}
.bottom{
position:fixed;
height:50px;
line-height: 50px;
bottom:0;
width:80%;
background:green;
}
</style>
HTML
<div class="content">
......<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>......<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>......<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>......<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>......<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>......<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>
<footer class="bottom">
<p>
this is always at bottom
</p>
</footer>
I've a simple web page that contains a <div> on background (a green rectangle on background) and a second <div> that is the "body" it contains paragraphs, table etc
And on bottom I need to to put a simple footer containing juste copyrights and some socials networks buttons. The problem is : the footer is not on bottom, there is a space under the footer, how to avoid this please ?
See my simple code please
On jsfiddle is better (to see the space under the footer) see here please
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin:-50px auto;
background-color:gold;
text-align:center;
}
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
You forgot to remove default margin of body.
Set in css:
body {
margin: 0;
}
Fiddle
body {
margin: 0;
}
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin: -50px auto;
background-color:gold;
text-align:center;
}
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
For best practice always set body and html 0 margin and 0 padding.
body,html{
margin:0;
padding:0;
}
Add this to .footer
margin-top:50px;
Perhaps you want to stick your footer to the bottom?
Clear the paddings and margins by:
html, body {
padding:0;
margin:0;
}
then
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
position:absolute;
bottom:0;
}
Working fiddle
Set the min height of body to 100% and set position to absolute.
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin:-50px auto;
background-color:gold;
text-align:center;
}
html, body{
padding: 0;
margin: 0;
}
html{
height: 100%;
}
body{
min-height: 100%;
}
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
position: absolute:
bottom: 0;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
For that case you just need to set the margin and padding of body tag to 0.
body {
margin: 0;
padding: 0;
}
Or if your site have margins specified you can only set the bottom margin of body as.
body {
margin-top: 0;
margin-bottom: 0;
padding: 0;
}
body {
margin: 0;
}
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin:10px auto;
background-color:gold;
text-align:center;
}
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
Modify content css:
.content{
width:80%;
height:300px;
margin:10px auto;
background-color:gold;
text-align:center;
}
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin:-50px auto;
background-color:gold;
text-align:center;
padding-top:100px;
}
footer{
width:100%;
height:65px;
margin-top: -65px;
background-color:red;
opacity:0.5;
position: absolute;
bottom: 0
}
body {
margin: 0;
min-height: 100%;
padding-bottom: 100px;
position: relative;
box-sizing: border-box;
}
html {
height: 100%;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
You can fix footer at bottom by position: absolute;
Updated fiddle
Use position: absolute;bottom: 0; Style in footer class
footer
{
width: 100%;
height: 65px;
background-color: red;
opacity: 0.5;
position: absolute;
bottom: 0;
}
Click Here Live Demo
This question already has answers here:
CSS side by side div's auto equal widths
(5 answers)
Closed 8 years ago.
In my layout in the main part of site I need two flexible columns. The height is known and always the same. But the width should be auto-increases with the width of the browser.
I need this because in div#1 should be different content (float right I supposed) and background than in div#2 (float left I supposed). Whole layout is increasing their width with browser (width 100%).
It would be easy to make if the background of div 1 and 2 is the same (wrapper + background set on parent) but in this example backgrounds are different. I do not know how to auto-increase the width of these two divs.
adjust the width parameter of div#1 and div#2
div #header {
display: block;
position: absolute;
top: 0px;
height: 100px;
}
div #div1 {
display: block;
position: absolute;
top: 100px;
width: 50%;
left: 0px;
}
div #div2 {
display: block;
position: absolute;
top: 100px;
width: 50%;
right: 0px;
}
this is what you want:
<div class="container">
<div class="header">
This is header
</div>
</div>
<div class="container">
<div class="div1">
This is left div
</div>
<div class="div2">
This is right div
</div>
</div>
<div class="container">
<div class="footer">
This is footer
</div>
</div>
.container{
max-width:960px;
padding:0 15px;
height:auto;
position:relative;
clear:both;
}
.header{
position:relative;
height:100px;
background-color:yellow;
width:100%;
display:block;
}
.div1{
position:relative;
height:400px;
background-color:pink;
width:50%;
float:left;
}
.div2{
position:relative;
height:400px;
background-color:green;
width:50%;
float:left;
}
.footer{
position:relative;
height:100px;
background-color:cyan;
width:100%;
display:block;
}
I've created a jsfiddle demo
What about a good, simple, semantic layout? The below uses positioning to maintain a fixed footer, here is an example without
Demo Fiddle
HTML
<header></header>
<section></section>
<section></section>
<footer></footer>
CSS
html, body {
height:100%;
width:100%;
margin:0;
}
header, footer, section {
position:absolute;
width:100%;
}
header, footer {
background:green;
height:50px;
}
footer {
bottom:0;
}
section {
top:50px;
bottom:50px;
width:50%;
background:yellow;
overflow-x:auto;
}
section:last-of-type {
background:blue;
left:50%;
}
Try this
#container{
width:100%;
clear:both;
}
#header{
width:100%;
}
#div1{
height:400px;
width:50%;
float:left;
}
#div2{
height:400px;
width:50%;
float:right;
}
#footer{
width:100%;
}
Can't figure out why it's too tall, sorry:
html {
min-height:100%;
position:relative;
}
body {
height:100%;
background-color:darkblue;
background-image:url(background.png);
background-repeat:repeat-y;
background-position:center center;
background-size:100% 100%;
padding:0;
margin:0;
}
#wrapper {
width:65%;
top:0; bottom:0; right:0; left:0;
background-color:#bad6e8;
border:2px solid black;
padding:0;
margin: 0 auto;
}
#header {
width:100%;
height:10%;
background-color:#bad6e8;
border-bottom:2px solid black;
padding:2px;
}
#user {
width:25%;
height:250px;
background-color:#bad6e8;
border-right:2px solid black;
border-bottom:2px solid black;
float:left;
padding:2px;
}
#menu {
width:100%;
height:35px;
background-color:#bad6e8;
border-bottom:2px solid black;
padding:2px;
margin-bottom:2px;
}
#content {
width:100%;
height:100%;
background-color:lightblue;
}
and:
<html>
<head>
<title>Playdux</title>
<link rel="stylesheet" type="text/css" href="design.css">
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="content">
<div id="user">
Usermenu
</div>
<div id="menu">
Menü
</div>
Content
</div>
</div>
</body>
</html>
The "wrapper" div should go all the way from the top of the page to the bottom. Stopping there, unless it has enough content to go beyond that.
But, without enough content, it's just way over the limit. My CSS is kinda messed up now because I tried to figure it out all the time.
To extend the wrapper from top to bottom, you must position: absolute or position: fixed
#wrapper {
width:65%;
position: absolute;
top:0; bottom:0; right:0; left:0;
background-color:#bad6e8;
border:2px solid black;
padding:0;
margin: 0 auto;
}
You must also remove height: 100% from content. Because this is interpreted as 100% of the containing block, which is wrapper in this case
#content {
width:100%;
background-color:lightblue;
}
See full JSFiddle
Another way to do this, would be dropping top:0; bottom:0; right:0; left:0;
and do just height: 100%
html, body {
height: 100%;
}
#wrapper {
height: 100%;
}
See another JSFiddle