Here's my html as basic as possible:
<div class="wrapper">
<div class="left">foo</div>
<div class="middle">foo</div>
<div class="right">foo</div>
</div>
And here comes my css:
* { padding: 0; margin: 0; }
html, body { height: 100%; }
.wrapper { min-height: 100%; }
/* left, middle and right have float:left and a width. Also min-height:100%; */
So, I've tried everything. Added min-heigth: 100% to all, taken it away and then put it back. Still a scrollbar appears.
Any ideas?
Martti Laine
Have you tried
overflow:hidden;
Try using:
html, body, .wrapper {
overflow-y:hidden;
}
By the way .wrapper should be #wrapper because it is assumed to be only once on a page.
Related
I have built this little ap in angular and would like to the container element to stretch the full height of the page, when the content doesn't fill the height of the page for example on a large screen this page doesn't:
http://purepremier.com/#/teams/57
I tried setting it to
position: absolute;
top:0;
bottom:0;
height:100%
but when the content overflows then the height of the container only stretchs to the viewport height.
Any ideas? Or is theere a way in angular to add the class to the body instead?
Yep, simply
* {
margin: 0;
padding: 0;
}
.container {
min-height: 100vh;
background: red;
}
<div class="container">
</div>
JSfiddle Demo
Support for viewport units
Or for an alternative
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.container {
min-height: 100%;
background: red;
}
<div class="container">
</div>
Absolute positioning is not the way to set full document height, but it sets to the viewport height. You can use fixed position instead:
#element{
position: fixed;
top:0;
bottom:0;
}
html, body {height:100%; min-height:100%; margin:0; padding:0;}
#full {background:red; height:100%;}
<div id='full'>hmm</div>
I know that this is not an uncommon problem, as a bit of Googling threw up quite a few pages with similar problems to my own. But try as I might I can't fix it so here goes:
I am currently building the website to my rugby team. It has a two column layout, with a main area and a sidebar. The relevant HTML is roughly
<div id="wrapper">
<div id="maincolumn"></div>
<div id="sidebar"></div>
<div class='clear'></div>
</div>
From some of the websites, I have gleaned that I need to set body and html to 100% and all the containers, so I have:
html, body, #wrapper, #innerwrapper, #sidebar { height: 100%; min-height: 100%;
#wrapper { max-width:900px; margin:0 auto; width:90%; }
#sidebar { float: right; width: 35%; padding:2%; background-color:#f7f7f7; }
#maincolumn { width:56%; float:left; padding-right:5%; }
.clear { clear:both; }
The problem I am having, is that when #maincolumn has a lot of content, the sidebar does not expand all the way down to the bottom of the page which is the behaviour I would like. I made some progress by setting all the containers to 100% and then adding the clear element, but that still only expands it a short way.
Instead of floating, you can use CSS tables:
#wrapper {
display: table;
}
#sidebar, #maincolumn {
display: table-cell;
}
Demo
Since you want both columns to have the same height regardless of the amount of content within them, first you have to understand that setting height:100% sets the height in relation to the width of the parent div(or containing block).
So if that's the case, here's what you can do:
#wrapper{
height:900px;
}
#sidebar{
height:100%;
}
#maincolumn{
height:100%;
}
DEMO
HTML :
<div id="wrapper">
<div id="maincolumn">vgnhngbbv hbcv nfvfbngbc</div>
<div id="sidebar">dfrtnjnbc ghm gbgfnbvfnythgfbbfg</div>
<div class='clear'></div>
</div>
CSS :
html, body, #wrapper, #maincolumn, #sidebar { height: 100%; min-height: 100%;}
#wrapper { max-width:900px; margin:0 auto; width:90%; }
#sidebar { float: right; width: 35%; padding:2%; background-color:#f7f7f7; }
#maincolumn { width:56%; float:left; padding:2%; background-color:#ff0000; }
.clear { clear:both; }
DEMO
I am using the jQuery library Nanoscroller to get the content div to scroll if it has a lot of content in there, and it does this fine. However, the problem I have is that the browser window still has a major scroll button on it (ie. the regular one on the right of a page).
What I want is for the header to be at the top, the footer to be at the bottom, and for the content to always take up whatever available height is remaining in the browser window. Such that the only scroll buttons will be the Nanoscroller ones within the content div. What I want is something like this:
The code I am using is this:
<body>
<div id="container">
<div id="header">
header
</div>
<div id="mycontent" class="nano">
<div class="content">
my content
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
With this css:
html, body {
margin: 0;
padding: 0;
}
#container {
margin: 0;
}
#header {
text-align:center;
background: #777;
color:#fff;
height:50px;
}
#mycontent {
background-color:red;
}
#footer {
background-color:blue;
clear:both;
height: 50px;
}
I have tried various combinations of making the position fixed for the header and footer, the height set to 100% of the mycontent div, ect and still no joy. I always seem to end up with a little bit too much of the page, such that I'm getting that major scroll bar appearing.
Any thoughts are welcome, thanks.
Use position: fixed instead:
#footer {
position: fixed;
background-color: blue;
width: 100%;
height: 50px;
bottom: 0;
}
body {
overflow-y: hidden;
#mycontent {
overflow-y: auto;
}
html, body {
overflow:hidden;
}
I am trying to get my footer correct but am having issues. I was able to keep the footer down at the bottom of the page but then soon realized that when the window is made small, it ends up covering content. I can fix this by taking away position:absolute BUT the footer no longer stays at the bottom of the page if I do this.
I've tried a lot of different things to get this to work, but this is what I am currently looking at, I am hoping someone could lend some advice here..
CSS code:
html, body {
margin: 0;
padding: 0;
height:100%;
}
#wrapper {
width:900px;
background-color:#FAFAFA;
min-height:100%;
margin:0 auto -45px;
height: auto !important;
height:100%;
}
#content{
margin-top:40px;
float: left;
padding-left:100px;
padding-bottom:30px;
overflow:auto;
}
#footer{
height:30px;
bottom:0;
background:#D2CFCF;
width:900px;
clear:both;
position:absolute;
}
I recently tried margin-top:-30px in the footer, and position:relative. With the code above, the footer is nice and seated on the bottom but covers content when the window is made small. What can I do?
The HTML is basically as follows
<body>
<div id="wrapper">
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
Use a position: fixed; rule on the footer and a bottom margin on the <body> tag.
http://jsfiddle.net/JGUYh/
BODY {
margin: 0 0 60px 0; /* keep regular content clear of the footer */
}
#footer {
position: fixed;
width: 100%;
height: 50px;
bottom: 0px;
background: #ccc;
overflow: hidden;
}
Note that depending on the window size the footer will cover the content sometimes. But scrolling will reveal any hidden content.
I have a div called header that is set up with a fixed position. The problem is when I scroll the page the content of the page shows up behind the header (the header is transparent).
I know a lot about css, but cannot seem to figure this one out. I have tried setting overflow to hidden, but I knew it wouldn't work (and it didn't).
This is very hard to explain, so I did the best I could.
html:
<div id="header">
<div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
<div id="content">
testing
</div>
</div>
css:
#header {
margin:0 auto;
position: fixed;
width:100%;
z-index:1000;
}
#topmenu {
background-color:#0000FF;
height:24px;
filter: alpha(opacity=50);
opacity: 0.5;
}
#leftlinks {
padding: 4px;
padding-left: 10px;
float: left;
}
#rightlinks {
padding: 4px;
padding-right: 10px;
float: right;
}
#containerfixedtop {
width: 100%;
height: 20px;
}
#contentfixedtop {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height:20px;
}
#container {
position: relative;
top: 68px;
width: 100%;
height: 2000px;
overflow: auto;
}
#content {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height: 2000px;
}
Here's a screenshot of the problem:
Just coming to this late, but in case anyone else runs across this in the future, here's your fix.
Your CSS Code:
.wrapper {
width:100%;
position:fixed;
z-index:10;
background:inherit;
}
.bottom-wrapper {
width:100%;
padding-top:92px;
z-index:5;
overflow:auto;
}
Your HTML:
<div class="wrapper">
...your header here...
</div>
<div class="bottom-wrapper">
...your main content here...
</div>
This will provide you with a header that cleanly matches your site, and floats at the top. The main content will scroll free of the header, and disappear when it passes the header.
Your .bottom-wrapper padding-top should be the height of your header wrapper's content.
Cheers!
You are probably looking for z-index. It allows you to specify the vertical order of elements on the page, so an element with z-index: 10 is floating above (visually) an element with z-index: 5.
Give the content z-index: 5 and see if it works.
I was having a similar issue, and found a solution for my case. It should apply whether you are using a full screen background image, or a solid color (including white).
HTML
<div id="full-size-background"></div>
<div id="header">
<p>Some text that should be fixed to the top</p>
</div>
<div id="body-text">
<p>Some text that should be scrollable</p>
</div>
CSS
#full-size-background {
z-index:-1;
background-image:url(image.jpg);
background-position:fixed;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
#header {
position:fixed;
background-image:url(image.jpg);
height:150px;
width:100%;
}
#body-text {
margin-top:150px;
}
This gives me the look of a full page image with a transparent fixed header and when the body content scrolls, it hides behind the header. The images appear seamless.
You could do the same thing with a solid color background, though, arguably, it would have been easier.
2 notes: the header has a set height, I have only tested in FF and Chrome.
Just came up with a new solution to this type of problem that I'm quite happy with.
Use clip-path on the content that needs to hide behind the transparent element. Then update the clip-path dynamically with js on window scroll.
HTML
<div id="sticky">Sticky content</div>
<div id="content">
<!-- any html inside here will hide behind #sticky -->
</div>
JS
window.addEventListener("scroll",function(){
const windowScrollTop = window.scrollTop;
const elementToHide = document.getElementById("content");
elementToHide.style.clipPath = `inset(${windowScrollTop}px 0 0 0)`;
});
Dynamic sticky content
In my case I had an element that I switched to position: sticky after scrolling past it. The #sticky content needs to be relative to the dom elements that came before it until we have scrolled far enough. Here's how I accounted for that:
HTML
<div id="otherStuff">Here's some other stuff</div>
<div id="sticky">Sticky content</div>
<div id="content">
<!-- any html inside here will hide behind #sticky -->
</div>
JS
window.addEventListener("scroll",function(){
const windowScrollTop = window.scrollTop;
const stickyElement = document.getElementById("sticky");
const elementToHide = document.getElementById("content");
const stickyElementTop = stickyElement.getBoundingClientRect().top
if(windowScrollTop >= stickyElementTop){
stickyElement.style.position = "sticky";
elementToHide.style.clipPath = `inset(${windowScrollTop - stickyElementTop}px 0 0 0)`;
}
else {
stickyElement.style.position = "relative";
elementToHide.style.clipPath = "none";
}
});
I fixed this problem using the background property with a color, you can use var even if you'd like to
.header{
width:100%;
position:fixed;
z-index:10;
background:blue;
/* background: var(--my-var-value); You can do this if needed*/
}
Does #header have a set height?
#header {position: fixed; height: 100px; }
#container {position: absolute; top: 100px; bottom: 0; overflow: auto; }
Pretty sure this wouldn't work in IE though...
Fix the position of the content div below the header + overflow-y the content div.
I have fixed background image
The header background is transparent
I don't want my content to override my transparent header
I came up with a solution scrolling the div instead the body:
<div>
<div class="header"></div>
<div class="content"></div>
</div>
.header { position: fixed; ... }
.content { position: fixed; height: calc(100% - HEADER_HEIGHT); overflow: scroll; }
I too faced similar issue, but solved it using a simple dirty hack
1) have a white image in images folder
2) then add this css in header style
z-index:999; // to make header above the scrolling contents
background-image : url("../images/white.png"); // to hide the scrolling content
3) It is done!!
The header's z-index is set to 1000, so the z-index of the container would have to be 1001 if you want it to stack on top of the header. https://codepen.io/richiegarcia/pen/OJypzrL
#header {
margin:0 auto;
position: fixed;
width:100%;
z-index:1000;
}
#topmenu {
background-color:#0000FF;
height:24px;
filter: alpha(opacity=50);
opacity: 0.5;
}
#leftlinks {
padding: 4px;
padding-left: 10px;
float: left;
}
#rightlinks {
padding: 4px;
padding-right: 10px;
float: right;
}
#containerfixedtop {
width: 100%;
height: 20px;
}
#contentfixedtop {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height:20px;
}
#container {
position: relative;
top: 68px;
width: 100%;
height: 2000px;
overflow: auto;
z-index:1001;
}
#content {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height: 2000px;
}
I was having the same problem. I just used added z-index:10 to the .header in CSS.
I solved this problem by adding another fixed div positioned right under my header with margin-top of the size of my header.
HTML:
<div id="header">
<div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="fixed-container">
Content...
</div>
CSS:
#fixed-container{
margin-top: header_height;
height: calc(100% - header_height);
width: 100%;
position: fixed;
overflow: auto;
}
I was facing the same problem, so the answer that tize gave helped me alot, I created a div right under my header and used some css(z-index, overflow and background), so the main element is scrollable and hid behind the transparent header:
HTML:
<header>
<h1>Hello World</h1>
</header>
<div class="inv-header"></div>
<main>Content Here...</main>
CSS:
header{
position:fixed;
background:rgba(255,255,255,80%);
top:0;
width:100%;
z-index:10;
}
.inv-header{
position:fixed;
top:0;
height:12.8%;
width:100%;
background:inherit;
}
main{
margin-top:5.9%;
padding-top:1%;
overflow:auto;
}