I am trying to design a page with a header, a main div that stretches to 100% of the vertical landscape (minus header and footer) and a footer. Like this pic:
I can get the header and main div to work. Like this:
<div id="wrapper">
<div class="header_div">HEADER</div>
<div class="main_div">MAIN</div>
<div class="footer_div">FOOTER</div>
</div>
With this CSS:
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.header_div{
height: 40px;
width: 100%;
background-color: #000000;
}
.main_div{
margin-bottom:40px;
margin-top:40px;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color: red;
}
.footer_div{
position: relative;
height: 40px;
width: 100%;
background-color: blue;
}
So the main div starts 40px off the top to account for the header and then stops 40px from the bottom to account for the footer. This works well but I cannot get the footer div to show below the main div. The way it is now with position: relative it's putting the footer on top of the main div. If I use position:absolute it puts it underneath the main div.
I am sure I am just doing this wrong because CSS is not my thing.
Any help on this would be great.
Thanks
Using CSS3 Flexbox:
/*QuickReset*/*{margin:0;box-sizing:border-box;}
body { /* body - or any parent wrapper */
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>
Use the css calc() function.
With this method, you don't have to define the position of the elements
Here is a demo
html:
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
css:
html, body {
height: 100%
}
body {
color: #FFF;
padding: 0;
margin: 0;
}
header {
background-color: #000;
height: 100px;
}
main {
background-color: #AAA;
height: calc(100% - 150px);
}
footer {
background-color: #000;
height: 50px;
}
Here's a simple method. Try this jsfiddle: http://jsfiddle.net/PejHr/
HTML:
<div id="top"></div>
<div id="main">
<div id="inner"></div>
</div>
<div id="bottom"></div>
CSS:
#main {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
padding: 50px 0px
}
#inner {
width: 100%;
height: 100%;
background: #f0f;
}
#top, #bottom {
width: 100%;
height: 50px;
background: #333;
position: absolute;
top: 0px;
left: 0px;
}
#bottom {
bottom: 0px;
}
Related
in situations where the content is small and body height: 100%, the footer is pressed to the bottom of the window, a pop-up absolute very long menu (longer then body height) increases the height of the document, resulting in a lot of free space after the footer. The problem is that the body height is at this point less than the document height.
How, using css, to force the body height to follow the height of the document.
Example on jsfiddle
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
height: 100%;
}
.ab {
left: 2em;
top: 2em;
right: 10em;
height: 150vw;
position: absolute;
border:1px solid yellow;
}
<div class="main">
<div class="ab"></div>
</div>
<style>
</style>
upd.
is looking for an css solution.
On JS (jQuery), it can be done some like this:
$("body").height($(document).height());
The issue is due to the .ab element having position: absolute;. This causes the element to be taken out of the document flow, resulting in the document height not changing.
Change the .ab to position: relative to fix this, but this might require some other HTML/layout changes.
function addElement() {
document.getElementById("ab").classList.add("show")
}
html,
body {
height: 100%;
position: relative;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
min-height: 100%;
box-sizing: border-box;
}
#ab {
box-sizing: border-box;
width: 90vw;
margin: 30px 5vw;
height: 150vw;
position: relative;
border:1px solid yellow;
display: none;
}
#ab.show {
display: block;
}
<div class="main">
<div id="ab"></div>
<button onclick="addElement()">Add tall element</button>
</div>
<style>
</style>
you can try this this will increase the height of main div and remove scroll or else u can give overflow-y:scroll
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
height:100%;
overflow-y:scroll;
position:relative;
}
.ab {
left: 2em;
top: 2em;
right: 10em;
height: 150vw;
position: absolute;
border:1px solid yellow;
}
<div class="main">
<div class="ab"></div>
</div>
<style>
</style>
I have one outer div and two children divs. I want the outer div fixed to the window, one child div to the left most of the parent div and another to the right most of the parent div.
When I position: fixed the parent, it is fixed to the window but the two child divs stick to the left and overlap. If I position: relative the parent, the two child divs stick to the left and right respectively but it is not fixed to the top of the window.
How can I do it? Thanks!
<div class="nav-wrapper">
<div class="child1"></div>
<div class="nav-pages"></div>
</div>
My css:
nav {
#media only screen and (min-width: 0) {
height: 3em;
.nav-wrapper {
padding: .7em 1em 0 1em;
}
}
#media only screen and (min-width: $medium-screen) {
height: 500px;
.nav-wrapper {
padding: 0em 1em 0 1em;
height: 64px;
position: relative;
background-color: rgba(60,63,65,0.22);
}
}
}
nav {
background-image: url("http://image.insider-journeys.com/overview/china.jpg");
background-size: cover;
}
.navbar-non-link {
padding: 0 15px;
}
.nav-pages {
padding-right: 0px;
}
.side-nav {
width: 500px;
}
Try This:
body {
height: 1200px;
}
.parent {
position: fixed;
background-color: red;
height: 100px;
width:100%;
}
.child1 {
background-color: green;
width: 100px;
height: 100px;
position: absolute;
left: 0;
}
.child2{
background-color: blue;
width: 100px;
height: 100px;
position: absolute;
right: 0;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
Something like this:
body {
width: 100%;
min-height: 1000px;
margin:0px;
padding:0px;
}
div {margin:0px;padding:0px;}
.wrapper {
border: 1px solid black;
width: 100%;
position: fixed;
height:50px;
top:0px;
}
.parent {
position: fixed;
width: 20%;
height: 50px;
background: red;
overflow:hidden;
top:1px;
right:40%;
}
.child1 {
position: fixed;
left: 20%;
top: 1px;
height: 50px;
width:20%;
background: green
}
.child2 {
position: fixed;
right: 20%;
top: 1px;
height: 50px;
width: 20%;
background: green
}
<body>
<div class="wrapper">
<div class="parent">parent
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
</div>
</body>
I have a full-width #body-container and a fixed width .bg-container on top of that. Both are minimum 100% of the available height.
So my footer is again on top of that - at the moment. But I want it to be after the #body-container.
So my question is: How do I need to adjust my setup to get the footer sticky?
As pen
html,
body {
height: 100%;
margin:0;
padding:0;
}
#body-container {
height: 100%;
min-height: 100%;
overflow:auto;
background-color: red;
}
.bg-container {
width: 920px;
margin: 0 auto;
background-color: blue;
min-height: 100%;
}
.pseudo-content{
background: yellow;
height: 1000px;
}
footer{
background: green;
height: 50px;
}
<div id="body-container">
<div class="bg-container">
<div class="pseudo-content">content</div>
</div>
</div>
<footer>
footer
</footer>
So, you need that your footer always be displayed?
Then, just add the following styles to your footer:
position: fixed;
bottom: 0;
width: 100%;
Complete:
footer {
position: fixed;
bottom: 0;
width: 100%;
background: green;
height: 50px;
}
Here is the JSFiddle: http://jsfiddle.net/W2UvH/1/
Very simple implementation of a sticky footer that should stick to the bottom of the screen when there is less content height than the height of the screen. But if the height of the content extends beyond the height of the screen, then the footer should follow along with it.
I don't understand why my footer is stopping half way up the screen.
HTML:
<div id="Canvas">
<div id="Container">
<div id="Wrapper">
</div>
</div>
</div>
<div id="SiteFooter">
<p>Copyright © All Rights Reserved.</p>
</div>
CSS:
body, html {
height: 100%;
}
#Canvas {
position: relative;
min-height: 100%;
}
#Container {
margin: auto;
background-color: #CCC;
max-width: 802px;
padding: 15px 0;
}
#Wrapper {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
width: 730px;
background-color: #999;
border: 1px solid #DEDEDE;
overflow: hidden;
height: 1000px;
}
#SiteFooter {
bottom: 0;
left: 0;
position: absolute;
width: 100%;
z-index: 9000;
background-color: #FF00FF;
height: 45px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #E0E0E0;
}
I see that all your other elements are positions relative. So, not sure what your exact implementation is, but:
#SiteFooter {
position: relative;
}
The above code should also do it for you.
You want the position to be fixed, not absolute.
#SiteFooter {
position: fixed;
}
Could you please give a html code for the following?
I need to display div and iframe horizontally fitting the whole page. But I need div to be fixed size (100px) and iframe fitting the remaining space.
Thanks
Fiddle
CSS
div{ border: 1px solid #f00; width: 100px; position: absolute; left: 0; top: 0;}
iframe{ width: 100%; margin: 0 0 0 100px;}
HTML
<div>hi</div>
<iframe src="http://www.google.com/"></iframe>
EDIT:
To avoid horizontal scrollbar define width in % to both the elements - Updated Fiddle
http://jsfiddle.net/gZNKk/1/
<html><head>
<style>
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#left {
float: left;
width: 100px;
background: blue;
height: 100%;
}
#right {
width: auto; /* This is the default */
float: none;
margin-left: 100px;
background: red;
height: 100%;
}
#right-iframe {
background: yellow;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right">
<iframe id="right-iframe"></iframe>
</div>
</body></html>
EDIT: Fixed the extra spacing on the right causing the scrollbar to appear.
CSS:
#content-wrapper {
width: 100%;
overflow:hidden;
}
#content-left {
width: 49.5%;
min-height: 100%;
float: left;
border-right: solid 1px #A9D0D6;
}
#content-right {
width: 49.5%;
min-height: 100%;
float: right;
}
HTML:
<div id='content-wrapper'>
<div id='content-left'></div>
<div id='content-right'><iframe src="http://www.google.com"></div>
</div>
Width you can adjust, whatever you required.
Try this,
http://jsfiddle.net/anglimass/UUmsP/15/