I have a fixed header which is hiding the top part of the scrollbar.
It's caused by setting overflow: auto on both hmtl and body.
However, if I don't do that, it breaks the floating header on mobile browsers (except Firefox).
I'm not sure what to do here, it seems I either have the header over the scrollbar or a broken fixed header on mobile browsers.
Here's an example.
html, body {
height: 100%; width: 100%;
margin: 0;
overflow: auto;
}
header {
position: fixed; top: 0; left: 0;
width: 100%; height: 7.5em;
z-index: 1000;
}
I removed overflow: auto from body and added user-scalable=no to <meta content='width=device-width,initial-scale=1' name='viewport'>. That does the trick.
See this answer
Related
I have an image that eventhough it has a parent set to overflow: hidden still overflows and creates a horizontal scroll on the page. Shown here
Here is the relevant code:
.section2img {
overflow-x: hidden !important;
height: min-content;
position: relative;
width: 50vw;
right: -60%;
top: 0;
}
.section2 img {
position: relative;
overflow-x: hidden !important;
}
GitRepo if needed
So what you can do is set the width of the img so it match with the website and then add object-fit: cover; to the img, what it does is to cut the part that overflows.
So I keep my footer at the bottom of my page with the following code:
It's a vue project so #app is my container with my content and footer in.
#app {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 5rem;
}
This works great in Chrome but somehow Firefox doesn't really care and just let's my footer float below my content.
Am I missing anything here?
I think you should be changing position to position: fixed.
Update: it's a Chrome-only bug, as Josh Crozier figured it out.
Resize the window vertically, to see why the code below does not work. The child element does not stay at the bottom of the parent. Why?
header {
background: red;
height: 50%;
left: 0;
position: fixed;
width: 300px;
}
header div {
bottom: 0;
position: absolute;
}
<header>
<div>Lorem</div>
</header>
This is currently a Chrome bug (as of version 47 and maybe earlier versions).
It only seems to apply to elements with fixed positioning. The issue is that the elements are repainted/rending incorrectly when resizing or scrolling. It's worth pointing out that the elements are definitely repainted/rendered, but it seems like they are rendered relative to their initial position when the DOM loaded.
This behavior is likely related to issues 454216, 153738, and 20574.
One work-around would be to wrap the element and absolutely position it relative to the parent element with the same height as the header ancestor element:
header {
height: 50%;
left: 0;
position: fixed;
width: 100%;
}
header .wrapper {
background: red;
height: 100%;
width: 300px;
position: relative;
}
header .wrapper > div {
bottom: 0;
position: absolute;
}
<header>
<div class="wrapper">
<div>Lorem</div>
</div>
</header>
Because <h1> has its own margin. Try
header h1 {
bottom: 0;
position: absolute;
margin-bottom: 0;
}
I'm trying to stretch content div to 100% height:
http://new.art-frame.spb.ru/catalog
content DIV:
<div id="rt-transition">...</div>
footer:
<footer id="rt-footer-surround">...</footer>
The problem is, I can't change html layout, only CSS.
(the best way is to use Firebug/Chrome inspector to see what's all about)
html {
position: relative;
min-height: 100%;
height: auto;
margin: 0;
}
body {
margin: 0 0 100px;
min-width: 100px !important;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
Try changing the height of the html to 100% instead of auto. Then, play around with the CSS of all the elements inside to make it fit. If there is excess overflow, use
body { overflow: hidden; }
To solve the problem, although this won't allow for scrolling.
Set:
min-height: 720px;
on your rt-main
here is my site
http://iadprint.com/about
i am trying to make the menu tag and the colright div to have a height of 100% and stick to the footer div pushing down to the bottom. but no matter what i try nothing works. i have tried validating the html but only 3 errors exist which arent that important to fix. what ami doing wrong?
You need to use faux background technique, CSS (possibly with table-cell) or JavaScript.
I'm a fan of fixed layouts for this sort of scenario where you want a footer to always appear at the bottom of the window:
header
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 130px;
}
nav
{
width: 960px;
margin: 0 auto;
}
article
{
top: 130px;
bottom: 120px;
left: 0;
width: 100%;
position: fixed;
overflow: auto;
}
footer
{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 120px;
}