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).
Related
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;
}
Ok, i thought of starting afresh following some confusions in my previous similiar post. Here, I am trying to know the exact "reason" as to why exactly my outer container div ("container" , pink) is not automatically expanding vertically to fit the content div ("content" , red) (which automatically expands vertically with length of text). I am looking a reason more than the solution, because the reason will help me understand the concept more deeply. Please copy dummy text loremipsum... several times in the "content" div so that it overflows from page
Screenshot
here is the code:
html, body {
width: 100%;
left: 0px;
top: 0px;
margin: 0px;
height: 100%;
}
.container {
width: 600px;
left: 0px;
position: relative;
right: 0px;
background-color: rgba(216,86,112,0.5);
margin: auto;
height: 100%;
}
.content {
height: auto;
width: 200px;
background-color: rgba(255,0,0,1);
position: absolute;
top: 0px;
bottom: auto;
left: 0px;
right: 0px;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
/* Paste dummy text here more than a page */
</div>
</div>
</body>
</html>
The problem is the following:
Instead of using
.container {
height: 100%;
}
try:
.container {
height: auto;
}
and instead of
.content {
position: absolute;
}
use
.content {
position: relative;
}
Here's why
When an element is set to be 'position: absolute' it wont collapse with any other element, that's why your container doesn't expand at all.
When an element is set to be 'Height:100%' it takes the height of its container, in your case the cointainer is the body which means it will take 100% percent of your screen (in your case), but your content is way higher than the screen and that's why it overflows your content.
Hope you understand....
i'm working on a page in wordpress which shows 8 divs with some content.i want to show those all divs to 100% of window height in all devices and then when user click on the link next it shows another div one after another on clicking next, but somehow my divs are not going 100% in height.
Here is the css:
<style>
html {
height: 100%;
}
body {
line-height:25px;
margin: 0;
padding: 0;
height: 100%;
}
.content {
margin: auto;
min-height: 100%;
}
</style>
Here is the html:
<div class="container">
<div class="content" >
<----content goes here------>
<a href="#Initial" rel="m_PageScroll2id" >NEXT</a>
</div>
<div class="content" id="Initial" >
<----content goes here------>
<a href="#Initial" rel="m_PageScroll2id" >NEXT</a>
</div>
</div>
Here is the link for my dummy page:
http://enablersinvestment.com/backend/how-it-works-scroll/
You just need to set .content min-height to be 100vh as follows:
.content {
margin: auto;
min-height: 100vh;
}
checkout this demo: http://jsbin.com/xayaku/1/
You need to set the height of .container to 100% as well:
html {
height: 100%;
}
body {
line-height:25px;
margin: 0;
padding: 0;
height: 100%;
}
.container {
height: 100%;
}
.content {
margin: auto;
min-height: 100%;
}
Your problem here is that your content is inside the container and container does not have height: 100%.
Add the following rule to your css and you should be fine.
.container {
min-height: 100%;
}
If im correct The child adepts the percentage height to the height of the parent.
And in your case the child is content en the parent is container. You should give container a height of 100%.
.container {
min-height: 100%;
}
Do correct me if im wrong
To get divs to fill the whole webpage, you must add this line:
position: absolute;
For example:
div.content {
position: absolute;
height: 100%;
}
Without that line, the '100%' will be considered as the size of what is inside the div.
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 have the following code:
HTML
<div class="container">
<div class="fixed-area">
<div class="content"></div>
</div>
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
html, body, body * {
z-index: 3;
}
div.container {
height: 100%;
position: relative;
background-color: #000000;
z-index: 1;
}
div.fixed-area {
position: relative;
width: 960px;
height: 100%;
margin: 0 auto;
background-color: #ffff00;
}
div.content {
position: relative;
width: 600px;
height: 1500px;
margin: 0 auto;
background-color: #ff0000;
}
The container (black) and fixed-area (yellow) divs do not expand with the content div (red) to cover the scrollable area. When scrollbar is used to view the bottom part of the content, a white background takes the place of the container and fixed-area divs. How can make the container and fixed-area divs expand to cover all background of the content, even when scrolled down?
If .container should have a minimum height of 100%, but should grow with the .fixed-area container, use:
height: auto;
min-height: 100%;
See: http://jsfiddle.net/gopeter/B2Ljt/4/ (shows how min-height works) and http://jsfiddle.net/gopeter/B2Ljt/3/ (shows how .container grows with .fixed-area)
Change container height to auto
Change to your container to this CSS
div.container {
height: auto;
position: relative;
background-color: #000000;
z-index: 1;
}
You had to change your container's height to auto;
You made the container's height 100%, which you didn't want. Simply remove this style.
JSFiddle demo