I wanted to create a footer which need to stay on the bottom of every screen, i have done it but the problem is it breaks on landscape view on small devices but on the portrait view it is working fine.
body, html {
height: 100vh;
position: relative;
}
.footer {
background: #0066cc;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
<div class="footer">
<div class="content">
<h4><small>Powered by</small> <img class="footer-img" src="images/logo.png" alt=""></h4>
</div>
</div>
i want it to stay at the bottom of every device and on landscape also!!
I have done it with this code it stays on the bottom of the page on landscape as well as portrait
-first i did css on my container (main div)
.container{
min-height: 100vh; /* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px; /* height of your footer */
width: 100%; }
-second i change footer css
.footer{
background: #0066cc;
position: absolute;
bottom: 0;
width: 100%; }
and it fixed my problem .
by the way you don't get this problem every time but when you don't have enough content for your page footer will leave it's place and you'll get extra space on different devices even on the web view but when you have enough content for a page then footer will always stay at the bottom.
You just need to change the way you position the footer. As you wanted in same position, the fixed instead of absolute will do the job.
body,html{
height: 100vh;}
.footer{
background: #0066cc;
position: fixed;
left: 0;
bottom: 0;
width: 100%; }
Related
It's a little bit strange.
In my 2 HTML pages i have a footer that is equal to both but in one, that is shorter than the other, the footer goes up and leave a space at the bottom of like 30px.
(In the longer page the footer stay attached to the bottom)
Here is the css of the footer and the body:
footer{
background-color: #0b2239;
position: absolute;
width: 100%;
}
html, body{
min-height: 100%;
}
I've tried to resolve it by adding bottom: 0; but in the longer page the footer go over the other element in the page
You just need to add to the footer the value bottom: 0;
footer{
background-color: #0b2239;
position: absolute;
width: 100%;
bottom: 0;
}
html, body{
min-height: 100%;
}
I wanted to have a full width background with my bottom div without changing the page layout structure. The following code allowed me to have a full background color (dark purple) just as I wanted it here. But when I checked the page on my phone, I saw that the bottom went up to 9999px. If I put overflow: hidden, then I dont get the full width background. Please help, thank you!!
.nextpage {
color: #FFF;
background: #2D0072;
width: 100%;
height: 120px;
text-align: center;
padding: 33px 5px;
display: block;
position: relative;
}
.nextpage:before, .nextpage:after {
content: "";
position: absolute;
background-color: #2D0072;
top: 0;
bottom: 0;
width: 9999px;
}
.nextpage:before {
right: 100%;
}
.nextpage:after {
left: 100%;
}
Of course, the best way to tackle this would be to arrange your layout HTML...
<body>
<header>
<div class="page-width">
// header stuff here
</div>
</header>
<content>
<div class="page-width">
// main content stuff here
</div>
</content>
<footer>
<div class="page-width">
// footer stuff here
</div>
</footer>
</body>
Then the CSS...
body {
display: flex;
}
content {
flex: 1;
}
.page-width {
margin: 0 auto; // centers your block element if smaller that it's parent
max-width: 1200px; // you decide
}
But you can't alter your layout?? You will have to do some hackery...
CSS
footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
stuff-in-footer {
margin: 0 auto; // for centering
max-width: 1200px; // you decide
}
The hackery needed is to put a bottom margin on the rest of your page so you can see it when fully scrolled. Also, 'fixed' will position the footer on the bottom of the page, as the CSS is written above, no matter the scroll position of your page. Some JS might be needed to apply the right bottom margin on your content based on the display height of your footer, and more to reveal the footer when the page is fully scrolled.
Check your media queries. Loading the page in a desktop browser and scaling the width of the window down vs loading the page on mobile on BrowserStack generates very different results.
So I have my media queries set to have an element positioned "X" pixels relative from the previous element at a min-width of 756px (the resolution of my iphone 6S). On my windows desktop, I positioned the element to where I want it to be. However, when I open the site up on my iphone (using the default Safari browser), the element is off by over a hundred pixels! The element is positioned higher on my iphone than it shows on my desktop. Any ideas? I checked my zooms on my desktop browser and they are all set to 100%.
edit: Here is a fiddle mockup of my code. https://jsfiddle.net/8f6y1pdx/1/
<header>
<div id = "navContainer"><h1>Hello</h1></div>
<div id = "backgroundImage"><img src = "http://cdn.wallpapersafari.com/4/18/laMvrx.jpg" width = "2560" alt = "bg image"></div>
</header>
<body>
<div id = "contentOneContainer">Container one</div>
<div id = "contentTwoContainer">Container two</div>
</body>
and the css
html, body{
padding: 0;
margin: 0;
}
#navContainer{
position: fixed;
z-index: 0;
width: 100%;
background-color: black;
color: white;
height: 100px;
text-align: center;
}
#backgroundImage{
position: fixed;
z-index: -2;
}
#backgroundImage img{
width: 100%;
max-width: 2560px;
}
#contentOneContainer{
width: 100%;
height: 500px;
background-color: blue;
position: relative;
top: 417px;
z-index: 0;
color: white;
}
#contentTwoContainer{
width: 100%;
height: 250px;
background-color: gray;
position: relative;
top: 417px;
z-index: 0;
color: white;
}
/*----------------------------------*\
Responsive
\*----------------------------------*/
#media (min-width: 757px){
#contentOneContainer{
background-color: red;
}
}
If you adjust the screen size, at 757px I have the background color of the container switch. Basically, on my desktop, I am lining up the bottom of the image with the top of the first container. When viewed on my iphone 6s (I don't know how to make this work when viewing the fiddle on mobile) the bottom of the image and the top of the container are a hundred plus pixels apart. I hope this helps a little. Also, sorry if my code blows.
Add viewport meta tag in the head section for the media queries to work on mobile.
http://getbootstrap.com/css/#overview-mobile
So I'm designing a website, and I created a banner/header image with text in the centre of that banner, and I want all my main content to go under the banner (the banner is the type which covers the entire page, so that you scroll down to see the content. However, the main content does not automatically go down or up, depending on the size of the header, since I set the width to 100%, so it gets resized according to the size of the window, so could somebody help with this issue, so that it maintains the same ratio with the header/banner?
The HTML code:
<div id="banner">
<h1 id="head">head</h1>
<img id="logo" src="Logo.jpg" alt="logo and banner"/>
</div>
<div id="everythingElse">
Scroll
<p>Content</p>
</div>
CSS code:
#head{
text-align: center;
position: absolute;
top: 4%;
left: 0;
width: 100%;
font-size: 100px
}
#logo{
width: 104%;
}
#banner{
position: absolute;
width: 100%; /* for IE 6 */
top: 0;
left: 0;
right: 0;
min-width: 1200px;
}
#everythingElse{
position: fixed;
width: 100%;
top: 75%;
}
Don't use absolute positioning. Use a height of 100vh if browser support is acceptable, otherwise use 100% and make sure your body and html elements are included in that rule.
I have a div which needs to fill out the height of the browser's viewport,but still says in the same position when the user scrolls the web page up and down. position: fixed; does this, but I am unable to use it as it's making the overflow scroll bar of the div jerky and slow. Is there an position or method that I can use so for example I currently have:
div.panel {
position: absolute;
top: 36px;
right: 0;
overflow: auto;
background: #636362;
padding: 0 0 20px 0px;
width: 290px;
height: 100%;
}
I'm not sure what you mean with "jerky and slow", because all scrollbars act the same. This is how I would resolve your issue:
HTML:
<div class="fixed">I'm fixed!</div>
<p>Rest of page</p>
CSS:
html, body {
/* make sure the page is at least height of viewport */
height: 100%;
}
body {
/* because the fixed div is no part of the flow,
make sure it is not overlapping the webpage */
padding: 0 0 0 100px;
}
.fixed {
height: 100%;
width: 100px;
left: 0;
position: fixed;
background: #e0e0e0;
/* only vertical-scrolling, but can be changed of course */
overflow-y: scroll;
}
JSfiddled Live example
Works in at least IE7, IE8 and Firefox.