In my website I have two main divs - one for the banner at the top, and one for the main content. They both contain inner elements like imgs, iframes etc. but I don't think this is important for my problem which is: how can I make the scroll bar for the main content not overlap the banner?
If it helps, you can view the source for my actual website on my github. But to save wasting time looking, I've wrote a small snippet in html which demonstrates this issue:
document.getElementById("someText").innerText = "this is some content ".replace(/ /g, '\n').repeat(15);
html, body {
margin: 0;
padding: 0;
}
#header {
position: fixed;
background-color: teal;
z-index: 1;
top: 0;
height: 100px;
width: 100%;
}
#main {
postion: absolute;
top: 100px;
}
<body>
<div id="header">
header
</div>
<div id="main">
<pre id="someText"></pre>
</div>
</body>
It may be hard to see, in the snippet here on SO but the scroll bar on the right overlaps the banner and I what I want is for it to stop when it reaches the banner.
I have tried (in the CSS) setting the overflow of the body to hidden as this is the scroll bar overlapping the banner, but this just removes it entirely so I can't scroll - so clearly not what I am looking for...
I have also tried setting the overflow-y of the main div to scroll, but this does not work as a bar does appear where I want it, but it is grayed-out so not usable.
I have created a fiddle for you:
https://jsfiddle.net/3gvowvag/1/
Your HTML and JS stays the same. For your CSS:
html, body {
margin: 0;
padding: 0;
overflow-y: hidden;
}
#header {
position: fixed;
background-color: teal;
z-index: 1;
top: 0;
height: 100px;
width: 100%;
}
#main {
position: absolute;
top: 100px;
max-height: 100%;
width: 100%
overflow-y: scroll;
}
So the changes are basically to give your html, body a overflow-y: hidden and your #main a max-height and width of 100% as well as overflow-y: scroll.
This basically does what you want - though I wouldn't be 100% confident about setting up the page like that. Absolute positioning and offsetting via pixels is a bit oldschool, also setting the overflow-y to hidden for html/body, not exactly sure how those things will behave in the long term. But pretty hard to fully think of this without further context.
P.S.: awesome cat!
You just need to add overflow-y: hidden; to the body (take a look at this previous answer) and then apply overflow-y: scroll; to the #main div.
document.getElementById("someText").innerText = "this is some content ".replace(/ /g, '\n').repeat(30);
html, body {
margin: 0;
padding: 0;
}
body {
overflow-y: hidden;
}
#header {
position: fixed;
background-color: teal;
z-index: 1;
top: 0;
height: 100px;
width: 100%;
}
#main {
postion: absolute;
top: 100px;
overflow-y: scroll;
}
<body>
<div id="header">
header
</div>
<div id="main">
<pre id="someText"></pre>
</div>
</body>
You might find this easier with a flexbox layout. Maybe something like this. As example set the overflow to auto if you don't want to see the greyed out scroll bar
<div class="wrapper">
<div class="header">
header
</div>
<div class="content">
content
content
content
</div>
</div>
.wrapper{
display:flex;
flex-direction:column;
background:blue;
height: 100vw;
}
.header{
height:100px;
background-color:pink
}
.content{
background:green;
flex-grow: 1;
overflow:scroll;
}
Related
Let me first try to illustrate the problem
I have a webpage which contains a header and a sidenav. The sidenav is fixed in css, since I don't its content to move when scrolling.
When the page isn't scrolled down it works as intended, somewhat like this
However when I scroll i don't want whitespace on top of the sidenav. Currently when I scroll down the page, it looks somewhat like this
The intended behavior should be something like this
How do I go about this in css? Do I mess with the z-index of the elements? so the sidenav is behind the header when the page isn't scrolled? Or do I dynamically add to the sidenav's size when scrolling?
And how would either of these options be done in css?
As I understand, you have to set z-index of the header higher than the sidenav
Stack Snippet
.header {
height: 100px;
background: #000000;
position: relative;
z-index:999;
}
body {
margin: 0;
}
.sidebar {
position: fixed;
left: 0;
top: 0px;
width: 100px;
background: red;
height: 100%;
padding-top:100px;
}
.content {
height: 1000px;
background: yellow;
}
<div class="header"></div>
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
My container is not touching my footer for the majority of cases and I'm not sure what's going on.
So here is my CSS code:
html {
min-height: 100%;
position: relative;
}
body {
margin: 0;
width: 100%;
height: 100%;
}
section {
height: 100%;
}
#container {
overflow: auto;
width: 80%;
margin: 0 auto;
background: red;
height: 100%;
}
.footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
Here's my HTML:
<body>
<div id="container">
<section>
<p>Content goes here</p>
</section>
</div>
<div class="footer">Content</div>
</body>
So I have all of the heights set for parent elements,but there's still a big gap between the container and the footer. In cases where the content takes up the whole page, the footer and container ends up touching, but the content for some reason gets lost in the footer. How can I solve this issue?
Height based on percentage are tricky. vh is much better for such purposes.
Here is the solution: JSfiddle
#container {
overflow: hidden;
width: 80%;
margin: 0 auto;
background: red;
height: 100vh;
}
Make one adjustment to your CSS:
Add height: 100% to the html element.
html {
height: 100%; /* NEW */
min-height: 100%;
position: relative;
}
This will clear the way for all child elements to recognize their percentage heights, and the container will expand. Your min-height: 100% will still work because min-height overrides height.
DEMO: http://jsfiddle.net/au6tcodc/
(You'll notice a vertical scrollbar on the container in the demo. This is caused by the overflow: auto declaration in #container. If you want to remove the scrollbar switch to overflow: hidden (see all overflow values).
I have a three-column layout that takes up 100% width and height of the browser (with padding). This layout contains two columns which also take up 100% height and should scroll independently.
Here is a jsfiddle: http://jsfiddle.net/KdZ9A/2/. Here is how it looks in Chrome (desirable -- individual columns scroll):
and Firefox and IE (undesirable -- body is scrolling):
This works perfectly in Chrome; however, the in Firefox and IE (10), the entire page scrolls instead of individual columns scrolling. I only want the columns to overflow and scroll -- not the body. Any idea how to make this work in Firefox and IE?
I've also tried a bit different approach using absolute positioning of the columns' contents: http://jsfiddle.net/KdZ9A/3/.
Here is the HTML I am using:
<div id="container">
<div id="inner">
<div id="palette">palette</div>
<div id="list">
<div class="content"></div>
</div>
<div id="editor">
<div class="content"></div>
</div>
</div>
</div>
I'm using absolute positioning to achieve 100% height and then display of table and table-cell inside that to achieve 100% height of the columnns:
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
position: relative;
}
#container {
background-color: #f1f1f1;
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
}
#inner {
display: table;
height: 100%;
}
#inner > div {
display: table-cell;
}
#palette {
min-width: 180px;
max-width: 180px;
width: 180px !important;
background-color: pink;
}
#list {
width: 55%;
min-width: 350px;
background-color: cyan;
}
#editor {
width: 45%;
min-width: 400px;
background-color: magenta;
}
.content {
overflow: auto;
height: 100%;
}
I was 5 minutes from giving up and HOLY CRAP...I GOT IT WORKING
http://jsfiddle.net/gFX5E/15/
This is based on the different approach I mentioned. I needed to wrap .content divs and make the wrappers position relative. I also added some headers to the columns.
HTML:
<div class="content-wrap">
<div class="content">
...
</div>
</div>
CSS:
.content-wrap {
position: relative;
height: 100%;
}
.content {
overflow: auto;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
Seems to work in Chrome, Safari, Firefox, and IE8+.
And here is a more semantic HTML5 version which also adds a header to the top: http://jsfiddle.net/gFX5E/20/. I believe this will require use of html5shiv to work in IE8.
If you are willing to settle for a fixed total width, here is how:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* makes filling up easier */
}
html, body {
height: 100%;
}
#container {
position: relative;
width: 980px;
height: 100%;
margin: auto;
background: grey;
}
#palette {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 800px;
background: pink;
}
#list {
position: absolute;
left: 180px;
top: 0;
bottom: 0;
right: 450px;
background: cyan;
overflow-y: auto;
}
#editor {
position: absolute;
left: 530px;
top: 0;
bottom: 0;
right: 0;
background: magenta;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="palette">Palette</div>
<div id="list" class="content"></div>
<div id="editor" class="content"></div>
</div>
<script>
$(function() {
for (var i=0; i<20; i++) {
$('.content').append('<p>Lorem ipsum [truncated for SO]</p>');
}
});
</script>
</body>
</html>
Demo on this Codepen: http://codepen.io/anon/pen/aqgCm?editors=100.
This is a pretty old post, but I thought I'd comment.
If you display: flex instead of display: table in your 1st example that should fix the issue.
Also setting your scroll container height to 100vh will also do the trick.
You have to understand that the browsers apply scroll only when they understand the size( i.e. height and width) of the content is greater than the size specified for it. In your case, the height you have specified for the div is 100%. This effectively tells the browser to keep increasing the size of the div till all the content fits in completely. Hence, this creates the situation where scroll isn't needed as the browser would 'fit' the entire content within this div.
So if you want the div (or the paragraphs contained in it) to be scrollable, then you would have to specify the height and then tell the browser to provide a scroll for the content that won't fit in the specified size.
I am not sure if you want the individual 'paragraphs' to be scrollable or the entire div( which contains these paragraphs) to be scrollable. In either case, you would need to provide a fixed height for the scroll to be useful. Your paragraph tag would need to have the following CSS applied to it :
p {
height: 200px; /*Some fixed height*/
overflow-y: scroll;
}
Here's an example of this: http://jsfiddle.net/y49C3/
In case you want your div called 'content' to be scrollable (as opposed to the paragraphs), then you would have to apply the aforementioned CSS to the div instead.
.content {
overflow-y: scroll;
height: 500px;
}
You can see that here: http://jsfiddle.net/qF7Mt/1/
I have tested this in Firefox (29) and IE 10 and it works fine!!!
Hope this helps!!!
I am trying to design a layout where i will have header 100px at the top. footer 80px always stick to the bottom of browser screen and an scrollable content area in between header and footer. the vertical scrollbar should come in the content area when i finished writing till the content touches the top end of footer.
Can Anyone suggest me how can i achieve this
Here is what i have tried: JsFiddle
<header>
</header>
<div id="main">
<div id="content">
scrollable content area
</div>
<footer>
footer always appearing bottom of the browser screen
</footer>
</div>
My css:
header {
height: 100px;
width: 100%;
background: #bbb;
}
#main {
background: #ccc;
width: 100%;
height: 100%
}
#content {
position: relative;
height: 100%;
width: 100%;
background: green;
overflow-y: auto;
}
footer {
position: relative;
bottom: 0;
height: 80px;
width: 100%;
background: #aaa;
}
EDITED: FIDDLE
#content {
position: absolute;
height: calc(100% - 180px);
background: green;
overflow-x: hidden;
overflow-y:scroll;
}
I answered a similar question before at: Div height percentage based but still scrolling
Here is one approach.
The HTML:
<header>The Header...</header>
<div id="main">
<div id="content">
scrollable content area
<p>Lorem ipsum dolor sit amet, ...</p>
</div>
</div>
<footer>footer always appearing bottom of the browser screen</footer>
The CSS:
html, body {
height: 100%;
}
body {
margin: 0;
}
header {
height: 100px;
width: 100%;
background: #bbb;
position: absolute;
top: 0;
}
#main {
background: #ccc;
width: 100%;
position: absolute;
top: 100px;
bottom: 80px;
left: 0;
right: 0;
overflow-y: auto;
}
#content {
overflow: auto;
background: green;
}
footer {
position: absolute;
bottom: 0;
height: 80px;
width: 100%;
background: #aaa;
}
The trick is to create an absolutely positioned block container that spans the area between the header and the footer, #main, using the top, bottom, left, right offsets, and apply overflow-y: auto.
The #content will then take up space and eventually trigger the scroll bar on #main.
See demo at: http://jsfiddle.net/audetwebdesign/aNRE9/
You will need to use JavaScript for this unfortunately. No big deal. I've also added the handler for when you resize the window.
var resizeTimer;
window.onload = function(){
makeMiddleFull();
}
window.onresize = function(){
clearTimeout(resizeTimer);
resizeTimer = setTimeout(makeMiddleFull, 100);
}
function makeMiddleFull(){
var cobj = document.getElementById('content');
cobj.style.height = (getDocHeight() - (document.getElementById('header').style.height + document.getElementById('footer').style.height)) + "px";
}
function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}
See updated fiddle for full code updates including DOM and CSS here:
http://jsfiddle.net/Qpc2s/2/
Just tell me what you have tried? I don't see any header, any footer, just a text there in the scollable div.
Ok let me guide you a bit.
What you do is simple but would require you to understand the point.
How to make the footer stick to the bottom.
footer {
position: absolute; // position as absolute..
bottom: 0; // margin-bottom as 0
max-width: 80px; // width
margin: 0 auto; // margin..
}
This will make the footer to always stay at the end of the document I mean at the bottom of the page.
How to make header
header {
position: absolute;
top: 0;
max-width: 100px;
margin: 0 auto;
}
How to make a scrollable div
I donot fully understand this one. So I am just going to guide you a bit.
You can create a scrollbar in the content div. You want this:
the vertical scrollbar should come in the content area
You can do that by using this:
div {
max-height: 100px;
min-height: 100px;
}
I will assume that you are going to change the div to the element or class or id to the one you're having.
Making a scrollable div with a scrollbar.
First you will create a div with a max-height, to make the div not exceed the height of the screen. Then you can use a scrollbar like this:
overflow: scroll;
Add this property to the element. This way, you'll have a footer, an header, and a content block which has a scrollbar for it self, not the one that browser has.
Fiddle for this:
http://jsfiddle.net/afzaal_ahmad_zeeshan/aNRE9/2/
I am really sorry but I didn't bother changing the background, but you can see, the header stays there, footer at the end, and the div scrolls! :)
Good luck!
I have created a layout which works well in IE8+ but not in IE7. The problem is, the absolutely positioned #container (which has a top to push it below the header and a bottom of zero to fill the body) fills the entire content length in ie7 rather than only fill the body.
I have setup a jsfiddle http://jsfiddle.net/TPNpy/97/ to show what's happening and would really appreciate any help.
Setting the height using javascript for ie7 is my last resort, and i'm not convinced this is the only way.
Thanks
It would be easier to have a look at the code in jsfiddle, but here is the basic structure and CSS:
#container { background-color: #333; width: 100%; position: absolute; bottom: 0; top: 80px; }
#sidebar { background-color: #333; width: 170px; height: 100%; float: left; overflow: hidden; overflow-y: auto; }
#content { background-color: #F9F9F9; height: 100%; margin-left: 170px; overflow: hidden; overflow-y: auto; }
<div id="container">
<div id="sidebar">
Sidebar Content (which allows scrolling when very long)
</div>
<div id="content">
Main Content (which allows scrolling when very long)
</div>
</div>