I have some content that is in an iFrame and a Footer that I want to be fixed, but I want the size of the footer to change based upon the user's screen size and I want the footer graphic to fill the footer. The footer has a background image that uses background-size: cover. So when the user has a wide screen, the footer should be as wide as the screen and the height should maintain the aspect ratio of the background image.
My HTML looks like this:
<div id="content">
<iframe id="xyz">
</iframe>
</div>
<div id="footer">
<div id="innerFooter">
</div>
</div>
My CSS looks like:
#content {
top: 0px;
left: 0;
position: relative;
border: 1px solid #6AA3D4;
width: 100%;
height: 100%;
}
iframe {
width: 100%;
height: 100%;
}
#footer {
width: 100%;
height: 100%;
background-color: #fff;
bottom: 0;
position: absolute;
width: 100vw;
}
.innerFooter {
background: url("images/footerMain.png");
height: 100%;
width: 100%;
background-size: cover;
position: relative;
display: inline-block;
}
I want my footer to be at the bottom of the page and to resize appropriately (height/width) to fully fit the background graphic.
I also want my main content (iframe) to be the full height of the page to the top of the footer.
Right now my iframe is not the full height of the page.
instead of position:absolute to footer use position:fixed and height should be in pixel for footer not in %.
#footer {
width: 100%;
height: 60px; /*changed percent to pixel*/
background-color: #fff;
bottom: 0;
position: fixed; /*changed absolute to fixed*/
width: 100vw;
}
see more on CSS positioning: Here
Related
header {
width: 100%;
min-height: 100vh;
color: black;
background-image: url('../../files/header-image.jpg');
background-size: 100%;
position: relative;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 100;
height: 60px;
overflow: hidden;
font-family: $base-font;
}
I set cover image for header, height 100vh. Navbar is inside header but fixed position. When i click on some of the navbar links it leads to other sections on the page (it is one page website), and when i scroll back my cover image got shorter for 60px (height of navbar). Why is this happening?
I would like to make an html full-screen like pages having header, main, and footer element filling the window height.
And, I want to make the main element to fill the rest of height. So, main element's height should be (window height - header height - footer height).
Header and footer heights are not fixed.
I can make it work using JavaScript, but I feel it is better if possible to make resizing smooth just by CSS.
Here is what I'm trying, and Jsfiddle is http://jsfiddle.net/yoshiokatsuneo/C53J3/
.header{
height: 30px;
width: 100%;
}
.main{
position: absolute;
width: 100%;
height: 50%;
}
.footer{
position: absolute;
bottom: 0px;
width: 100%;
}
.content{
position: absolute;
height: 100%;
width: 100%;
}
<div class="content">
<img src="http://mrg.bz/ccyR3V" class="header">
<img src="http://mrg.bz/qmVoy1" class="main">
<div class="footer">
Here is footer. height is not fixed.
</div>
</div>
In this jsfiddle, I would like to make the main element fill between the header and the footer.
Is there any idea?
Use CSS tables:
FIDDLE
...also, the main content doesn't have to be an img, it could be a div an ,a etc.
FIDDLE
* {
margin:0;padding:0;
}
html, body {
height: 100%;
}
.header {
height: 30px;
width: 100%;
}
.mainWpr {
height: 100%;
}
.main {
width: 100%;
height: 100%;
}
.footer {
width: 100%;
}
.content {
height: 100%;
width: 100%;
display:table;
}
.content > div {
display:table-row;
}
<div class="content">
<div>
<img src="http://mrg.bz/ccyR3V" class="header" />
</div>
<div class="mainWpr">
<img src="http://mrg.bz/qmVoy1" class="main" />
</div>
<div>
<div class="footer">
Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer..</div>
</div>
</div>
Can you elaborate your question and what you want to achieve.
also please try this one.
.header{
position: absolute;
top: 0px;
height: 30px;
width: 100%;
}
.main{
position: absolute;
top: 30px;
width: 100%;
height: 100%;
}
.footer{
position: fixed;
bottom: 100px;
width: 100%;
}
.content{
position: absolute;
height: 100%;
width: 100%;
}
I wonder how can I achieve in Bootstrap 3-row grid layout, with content row fills screen size ( and header and footer are fixed height ).
Here is an image what I am trying to achieve:
I would nest the header and footer within a content div and set this content div to 100% height with a top and bottom padding that equals the height of the header/footer.
Example 1: http://jsfiddle.net/52VtD/6841/
Example 2 (with Bootstrap columns): http://jsfiddle.net/52VtD/6842/
Example 3 (with scrollable inner container): http://jsfiddle.net/52VtD/6843/
HTML
html, body {
height: 100%;
}
.content {
height: 100%;
position: relative;
padding: 40px 0;
background: yellow;
}
.header {
width: 100%;
height: 40px;
position: fixed;
top: 0;
background: black;
}
.footer {
width: 100%;
height: 40px;
position: fixed;
bottom: 0;
background: black;
}
My objective is to make a website for my portfolio.
I have a div for the menu that wanted to be on top of another div that works as a container for all of my images. The images have to fill 100% height of the browser.
The problem is, that I wanted my website to scroll horizontally and when I start to add content, as soon as the width goes over the 100% of the browser window the new image goes under the first image making it scroll horizontally.
What can I do to correct this?
CSS
body, html {
height: 100%;
}
#main {
width: 100%;
height: 100%;
background-color: #000;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
#menu {
width: 200px;
height: 500px;
background-color: #fff;
position: absolute;
top: 10px;
left: 10px;
overflow: scroll;
z-index: 2;
}
#img {
height: 100%;
float: left;
overflow: scroll;
}
Remove the width from your #main tag. As soon as an element hits that 100% it's going to move down to the next line.
I have a wide image I want to use as a fixed footer. The main page is 960px and centered, and the footer is 1620px. If the browser window is greater than 960px wide, then it shows more and more of the footer image without displaying scroll bars.
How can I achieve this? So far I have this, but it's wrong:
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
div#wrapper {
position: relative;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -340px;
text-align: center;
}
div#body-container {
width: 960px;
margin-left: auto;
margin-right: auto;
}
.footer, .push {
width: 1620px;
height: 340px;
}
HTML
<div id="wrapper">
<div id="body-container"> <!-- width: 960px -->
<!-- content -->
</div>
<!-- fixed footer -->
<div class="push"></div>
<div class="footer"><img src="img/footer.png"></div> <!-- width: 1620px -->
</div>
.footer {
width:100%;
height:345px;
display: block;
background:url(/img/footer.png) no-repeat center top;
}
You can solve this by updating the width of your footer to 100% and adding the property overflow: hidden which will remove the scrollbars if the content inside (the image) is larger than the width of the footer.
It gets a little more complicated however if what you're trying to do is also center the image. For this you'll need to add relative positioning to the .footer and absolute positioning to the img. You'll also need to add left: 50% and margin-left: -810px (half of your image width) to the img.
Here is the final updated portions of the code:
.footer, .push {
width: 100%; /* changed from 1620px;*/
height: 340px;
overflow: hidden;
position: relative;
}
.footer img {
width: 1620px;
height: 340px;
left: 50%;
margin-left: -810px;
position: absolute;
}
And here is a jsfiddle to demonstrate: http://jsfiddle.net/uf8Lh/