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;
}
Related
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;
}
I'm trying to figure out how to write some css for a peculiar layout I haven't seen before. The image below contains the sections. For guidance:
Section "1" is a header, that should be fixed within the alpha zone
Section "2" is a div which ought to have a scrollbar when it gets too tall (determined by the height of the viewport/window)
Section "3 "is a footer, that should be fixed within the alpha zone
Section "4" is a right hand, fluid, container, that will have an iframe. The iframe itself will manage the scrolling.
Any thoughts?
My code at the moment is kind of all of the place, but this is the gist of how close I got:
CSS:
.controller {
width: 400px;
height: 100%;
}
.controller header {
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 400px;
}
.controller footer {
position: absolute;
bottom: 0;
left: 0;
height: 60px;
width: 400px;
}
.controller .body {
overflow: scroll;
}
.focus {
float: left;
width: 100%;
}
Markup:
<div class="wrapper">
<div class="container">
<header></header>
<div class="body">
<footer></footer>
</div>
<div class="focus">
</div>
</div>
Here is a demo in jsFiddle for how to achieve this,
The style I used is
body, html {
padding:0;
margin:0;
}
.container {
width: 25%;
height: 100%;
float:left;
position:absolute;
}
.container header {
display:block;
height: 10%;
width:100%;
background-color:#ff5;
}
.container .body {
position: relative;
overflow: auto;
width: 100%;
height:80%;
background-color:#f5f;
}
.container footer {
position: fixed;
bottom: 0;
left: 0;
height: 10%;
width: 25%;
background-color:#5ff;
}
.focus {
background-color:#ddd;
position: fixed;
left: 25%;
width:75%;
height: 100%;
overflow:auto;
}
.focus iframe{
width:99%;
height: 99%;
}
Hope this help you.
looked for other examples but couldn't find any. my image container uses max-width/max-height so the image scales to the container but I can't seem to get it to auto margin top/bottom or vertical align it to the middle without setting a height.
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#container {
border: solid 1px #000;
height: 100%;
width: 65%;
position: absolute;
right: 0;
}
#container img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
vertical-align: middle;
}
<div id="container"><img src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzE2LzAzL3NjcmVlbnNob3QyXzJlb2RkLnBuZwpwCXRodW1iCTg1MHg1OTA+CmUJanBn/5b500a85/9ee/screen-shot-2012-12-14-at-9-45-01-am.jpg" />
</div>
http://jsfiddle.net/beftR/
I could only get it to work by adding another div named #container2 to your code. I used table/table-cell display type to do it. Here is what I did (jsFiddle here).
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#container {
border: solid 1px #000;
height: 100%;
width: 65%;
position: absolute;
right: 0;
display:table;
}
#container2 {
display:table-cell;
vertical-align:middle;
}
#container img {
max-width: 100%;
max-height: 100%;
}
<div id="container">
<div id="container2">
<img src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzE2LzAzL3NjcmVlbnNob3QyXzJlb2RkLnBuZwpwCXRodW1iCTg1MHg1OTA+CmUJanBn/5b500a85/9ee/screen-shot-2012-12-14-at-9-45-01-am.jpg" />
</div>
</div>
Ok, I want this:
For that, I have this HTML code:
<div id="wrapForCenter">
<div id="title">
title
</div>
<div id="contentFrame">
<div id="imagePlaceholder">
image
</div>
<div id="content">
content
</div>
</div>
<div id="buttonsBar">
buttonsBar
</div>
</div>
And I have this CSS code:
#wrapForCenter
{
position: absolute;
top:50%;
left: 50%;
margin-top: -160px;
margin-left: -240px;
width: 480px;
height: 320px;
border: 1px solid black;
}
#title
{
width: 100%;
height: 40px;
background-color: Blue;
}
#contentFrame
{
height: 240px;
width: 480px;
}
#imagePlaceholder
{
float: left;
width: 100px;
height: 100%;
background-color: Green;
}
#content
{
float: left;
width: 380px; /*<-- look at this*/
height: 100%;
background-color: Yellow;
overflow: auto;
}
#buttonsBar
{
clear: left;
width: 100%;
height: 40px;
background-color: Silver;
}
If I change the contents width to 100%, why occurs this?
What I spect is that content width would be contentFrame minus imagePlacehoder width in pixels, but when I specify float:left for both, imagePlacehoder and content, content gets its parent container width. Why?
Is there another way to get the same result without using float (maybe display:inline)? And using width:100% for content?
Thank you very much. CSS is not my strenght.
This is called a float drop. Floats work such that they'll fit side-by-side as long as there's enough room for each, but a float will bump down below the previous one if there's not enough room for it to fit.
width:100% means make it 100% as wide as its container (#wrapForCenter). Naturally, if you tell something to be the entire width of it's container, nothing can fit along either side inside of that container, so as a float it must move down below whatever is before it (an earlier "sibling") to fit.
A question similar to this was asked by me myself in stackoverflow before.
How to auto adjust (stretch) div height and width using jQuery or CSS
You can set HTML like;
<div id="container">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
</div>
And CSS like;
#container {
position: relative;
width: 300px;
height: 200px;
}
#top, #left, #right, #bottom {
position: absolute
}
#top {
top: 0;
width: 100%;
height: 50px;
background: #00b7f0
}
#left {
top: 50px;
width: 50px;
bottom: 50px;
background: #787878
}
#right {
top: 50px;
left: 50px;
right: 0;
bottom: 50px;
background: #ff7e00
}
#bottom {
bottom: 0;
width: 100%;
height: 50px;
background: #9dbb61
}
Here is the working demo.
Hope this helps..
Note: I recommend (not forcing) you to do a search in stackoverflow before asking questions.
You should set your image holder to 25% and your content to 75%, or if you know how much space you have allocated for your entire content area(picture and content) then subtract 100 from that and use that many pixels. but overall this should work
#wrapForCenter {
position: absolute;
top: 50%;
left: 50%;
margin-top: -160px;
margin-left: -240px;
width: 480px;
height: 320px;
border: 1px solid black;
}
#title {
width: 100%;
height: 40px;
background-color: Blue;
}
#contentFrame {
height: 240px;
width: 480px;
}
#imagePlaceholder {
float: left;
width: 25%; /* See Here */
height: 100%;
background-color: Green;
}
#content {
float:right;
width: 75%; /* And here */
height: 100%;
background-color:Yellow;
}
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/