I have tried everything but footer is not at the bottom of page.
I tried position: fixed; but always when I scroll down it stays on the same position.
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
}
.footer, .push {
height: 142px;
background: black;
}
Use following CSS:
.footer {
position:fixed;
left:0px;
bottom:0px;
height:142px;
width:100%;
background:black;
}
here is test fiddle: https://jsfiddle.net/85nyb2mv/
If to use position: fixed, the element will always be at the same position of the screen. If you want footer to be at the bottom of wrapper element, try to give position: relative to .wrapper and position: absolute to .footer, it will place your footer at the bottom of wrapper. Here is an example:
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
background-color: gray;
position: relative;
}
.footer, .push {
height: 142px;
width: 100%;
background: black;
position: absolute;
bottom: 0;
left: 0;
}
<div class="wrapper">
<div class="footer"></footer>
</div>
Use this CSS styles:
.wrapper {
height: calc(100% - 142px);
margin: 0 auto;
}
.footer {
height: 142px;
background: black;
position: absolute;
bottom: 0;
right: 0;
left: 0;
z-index: 1;
}
CASE 1
When body' height is bigger than 100vh
body{
margin: 0;
padding: 0;
min-height: 100vh;
height: 2000px;
position: relative;
background: pink;
}
header{
width: 100vw;
height: 100px;
background: gold;
}
footer{
position: absolute;
bottom: 0px;
left: 0px;
width: 100vw;
height: 100px;
background:darkgray;
}
<body>
<header>
</header>
<footer>
</footer>
</body>
CASE 2
When body' height is smaller than 100vh
body{
margin: 0;
padding: 0;
min-height: 100vh;
height: 200px;
position: relative;
background: pink;
}
header{
width: 100vw;
height: 100px;
background: gold;
}
footer{
position: absolute;
bottom: 0px;
left: 0px;
width: 100vw;
height: 100px;
background:darkgray;
}
<body>
<header>
</header>
<footer>
</footer>
</body>
**html**
<body>
<header>
</header>
<section>
</section>
<footer>
</footer>
</body>
**CSS**
<style type="text/css">
footer {
position:fixed;
left:0px;
bottom:0px;
width:100%;
background:black;
color:#fff;
z-index:99;
}
</style>
The problem was <div class="fade">, so I removed it and added
.page-content:after {
content: "";
display: block;
}
<div class="page-content"> ----> between header and footer
Related
I'm trying to create a normal HTML page and I've set the height/width of the body With Vh and Vw
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
width: 100vw;
background-color: red;
padding: 0;
margin: 0;
overflow: auto;
}
.Top-banner {
position: absolute;
top: 0;
left: 0;
height: 10%;
width: 100%;
background-color: blue;
box-sizing: border-box;
}
.Ad {
position: absolute;
top: 10%;
left: 0;
height: 15%;
width: 100%;
background-color: purple;
text-align: center;
box-sizing: border-box;
}
.Ad .Close-but {
position: absolute;
top: 65%;
left: 5%;
height: 30%;
width: 10%;
background-color: green;
text-align: center;
}
.Main-content {
position: absolute;
top: 25%;
left: 0;
height: 100%;
width: 100%;
background-color: pink;
text-align: center;
box-sizing: border-box;
}
<div class="Top-banner">
</div>
<div class="Ad">
<button class="Close-but">Close</button>
</div>
<div class="Main-content">
</div>
The problem is that an extra content create on the left its the body what am I doing wrong
I cannot put an jsfiddle demo because in the demo this problem don't happen I tried the HTML page in other computers and the same issue
Not sure if understand your question correctly but if your problem is the horizontal scrollbar then simply change 'overflow: auto;' to 'overflow-x: hidden;'
if you don't want a vertical scroll aswell then make 'overflow: hidden;'
body{
height: 100vh;
width: 100vw;
background-color: red;
padding: 0;
margin: 0;
overflow-x: hidden; //change this
}
Below is my CSS and HTML code. As you can see the margin on right is not coming.
Can anybody tell me the reason for this?
Is the structure of HTML, CSS right? I have to show two windows in the middle of the page and a footer and a header. So, I have positioned everything absolute.
Is that correct practice?
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
min-width: 100vh;
}
.wrapper{
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
background-color: #666;
overflow-x: hidden;
}
.header{
position: absolute;
margin: 0;
top: 0%;
height: 10%;
width: 100%;
background-color: #fff;
}
.footer{
position: absolute;
bottom: 0%;
height: 10%;
width: 100%;
background-color: #f7f7f7;
}
.header .brand-header{
}
.window{
position: absolute;
width: 100%;
top: 10%;
bottom: 10%;
background-color: #eee;
margin: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
</head>
<body>
<div class="wrapper">
<div class="header"> </div>
<div class="window">
<div class="sub-window left-window"> </div>
<div class="sub-window right-window"> </div>
</div>
<div class="footer"> </div>
</div>
</body>
</html>
Apply width calc like
.window {
background-color: #eee;
bottom: 10%;
margin: 10px;
position: absolute;
top: 10%;
width: calc(100% - 20px); /*You apply margin:10px;*/
}
that is just because your width is 100% and you applied an margin of 20 px(margin-left:10,margin-right:10) => in effect it requires space of 100% + 20px. that is the reason for you can trace out margin on your right side.
use width: calc(100% - 20px); on your .window ,it will works fine.
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
min-width: 100vh;
}
.wrapper{
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
background-color: #666;
overflow-x: hidden;
}
.header{
position: absolute;
margin: 0;
top: 0%;
height: 10%;
width: 100%;
background-color: #fff;
}
.footer{
position: absolute;
bottom: 0%;
height: 10%;
width: 100%;
background-color: #f7f7f7;
}
.header .brand-header{
}
.window{
position: absolute;
width: calc(100% - 20px);
top: 10%;
bottom: 10%;
background-color: #eee;
margin: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
</head>
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="window">
<div class="sub-window left-window">
</div>
<div class="sub-window right-window">
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
I need help to make these two <div>'s (#side-nav and #content-wrapper) to scroll independently,
HTML:
<div id="wrapper">
<div id="top-nav">
Top nav
</div>
<div id="side-nav">
<ul>
<li>Thing</li>
<li>Thing</li>
</ul>
</div>
<div id="content-wrapper">
<!-- Ton of conent here -->
</div>
</div>
CSS:
#wrapper {
width: 100%;
background-color: #fff;
}
#top-nav {
position: fixed;
top: 0;
height: 60px;
width: 100%;
background-color: green;
}
#side-nav {
position: fixed;
width: 250px;
height:100vh;
overflow-y: scroll;
background-color: red;
}
#content-wrapper {
margin: 60px 0 0 250px;
padding: 0 30px;
overflow-y: scroll;
background-color: blue;
}
now if I scroll the #side-nav to the end or top, #content-wrapper will scroll too. #side-nav has to stay full-page height and fixed even if there is not that many <li>'s.
I've quickly made pen here:
http://codepen.io/blizqery/pen/QbZzRN
Thanks!
Check this: http://codepen.io/anon/pen/xGyMjM
You need to set height to content-wrapper, and also set the left, right & top.
#side-nav {
position: fixed;
width: 250px;
height:100vh;
left: 0;
right: 0;
overflow-y: scroll;
background-color: red;
top: 60px;
}
#content-wrapper {
margin: 60px 0 0 250px;
padding: 0 30px;
overflow-y: scroll;
position: fixed;
left: 0;
top: 0;
height:100vh;
background-color: blue;
}
I believe this works for your issue
body{
margin:0px;
}
#top-nav {
position: fixed;
top: 0;
height: 10vh;
width: 100%;
background-color: green;
}
#wrapper {
width: 100%;
background-color: #fff;
}
#side-nav {
float:left;
width: 250px;
height: 90vh;
overflow-y: scroll;
background-color: red;
}
#content-wrapper {
margin: 10vh 0 0 250px;
padding: 0 30px;
overflow-y: scroll;
background-color: blue;
height:90vh;
}
I want to achieve same thing horizontally as you can see here vertically and IE9+ compatible
[Edit]: I would like to have middle content on overflow have scroll bar, in this case tabling won't help.
jsFiddle
Css:
.container{
width: 100%;
height: 100%;
position: relative;
background-color: silver;
}
.top{
width: 50px;
height: 100%;
position: relative;
float: left;
background-color: red;
}
.bottom{
width: 50px;
height: 100%;
position: relative;
float: right;
background-color: green;
}
.middle{
background-color: blue;
overflow: hidden;
height: 100%;
}
HTML:
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
<div class="middle"></div>
</div>
Question: Is it possible without javascript and any fixed values?
I don't want to do something like this:
.top-div {
height: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.middle-div{
top: 50px;
bottom: 50px;
left: 0;
right: 0;
position: absolute;
}
.bottom-div{
height: 50px;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
In this scenario I'm forced to use JavaScript if I want to change height of footer or header.
using calc from css3
the style:
body,html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container{
height: 100%;
background-color: silver;
}
.container,.top, .bottom, .middle{
display:block;
clear:both;
position: relative;
width: 100%;
}
.top{
height: 50px;
width: 100%;
background-color: red;
}
.bottom{
height: 50%;
position: relative;
background-color: green;
}
.middle{
background-color: blue;
overflow: hidden;
-webkit-height: calc(100% - 100px);
-moz-height: calc(100% - 100px);
height: calc(100% - 100px);
}
the markup:
<div class="container">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
Demo: http://jsfiddle.net/YL4f3/1/
For now you have to give height to your containers. Once you have the content in place, just change the height to auto.
Also, when you change the height to auto, change the margin-top for the middle div as per your page needs.
<style>
.container div{
float:left; }
.container{
width: 100%;
height: 100%;
position: relative;
background-color: silver;
}
.top{
width: 100%;
height: 100px;
position: fixed;
top:0;
background-color: red;
}
.bottom{
width: 100%;
height: 100px;
position: fixed;
bottom:0;
background-color: green;
}
.middle{
margin-top:100px;
width: 100%;
background-color: blue;
height: 1000px;
}
</style>
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
<div class="middle"></div>
</div>
I want #main to be 100%, but not affected by #upper -- pushed down by 39px and making the page scrollable. Overflow: hidden on body won't do it for me, since I need to see content at the bottom. How do I fix this? Something similar to sticky footer, or? I don't seem to understand it.
<body>
<div id="upper"></div>
<div id="main">
<div id="box"></div>
</div>
</body>
html, body {
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
}
#upper {
height: 39px;
width: 100%;
background: #212121;
}
#main {
display: block;
width: 100%;
min-height: 100%;
margin: 0 auto;
background: blue;
}
Picture of how it looks http://i46.tinypic.com/25k1jcn.jpg
An alternative to #Zoltan's answer:
html, body {
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
}
#upper {
height: 39px;
width: 100%;
background: #212121;
position: fixed;
top: 0;
left: 0;
}
#main {
display: block;
width: 100%;
margin: 0 auto;
background: lightblue;
position: fixed;
top: 39px;
bottom: 0;
}
<div id="upper"></div>
<div id="main">
<div id="box">Hi</div>
</div>
Try this - http://jsfiddle.net/ax7nq/
html, body {
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
}
#upper {
height: 39px;
width: 100%;
background: #212121;
position: absolute;
}
#main {
display: block;
width: 100%;
min-height: 100%;
margin: 0 auto;
background: lightblue;
}
#box {
padding-top: 39px;
}
Try changing #upper to this:
#upper
{
height: 39px;
width: 100%;
background: #212121;
position:absolute;
left:0;
top:0;
}