Develop Reference

How can I add a scrollbar to a div that has a parent div with overflow hidden?

I have am restricting the body to be the viewport's height and setting overflow: hidden on it. I am using jQuery to slide in a div that is absolutely positioned outside of the viewable area. The div that slides in is larger than the viewport and I would like for its contents to be scrollable within the viewport window.
Here's my fiddle: https://jsfiddle.net/hvew0qx4/1/
HTML:
<div class='buttons'>
<button id="toggle-results">Show Results</button>
</div>
<div class="map general-styling"></div>
<div id="results-area" class='movable'>
<div class="results general-styling"></div>
</div>
CSS:
body {
height: 100vh;
overflow: hidden;
position: relative;
}
.general-styling {
box-sizing: border-box;
width: 100%;
border-width: 10px;
border-style: solid;
}
.movable {
transition: all 0.3s ease;
position: absolute;
z-index: 44;
width: 100vw;
min-height: 100vh;
background-color: white;
overflow-y: scroll;
}
.map {
background-color: red;
border-color: pink;
height: 100vh;
}
.results {
background-color: blue;
border-color: orange;
height: 1000px;
}
.buttons {
position: absolute;
z-index: 1000;
top: 40px;
right: 40px;
}
JavaScript:
var $toggleResultsBtn = $('#toggle-results');
var $resultsArea = $('#results-area');
var $body = $('body');
$('.movable').css('top', $body.height());
$toggleResultsBtn.on('click', function(){
$toggleResultsBtn.text(function(i, text){
return text === "Show Results" ? "Hide Results" : "Show Results";
});
$resultsArea.css('top', function(i, value){
return value === '0px' ? $body.height() : '0px';
});
});

Set the height of the inner div to that of its container, and then add the property overflow-y: scroll to it.
Like so:
.container {
height: 200px;
overflow: hidden;
}
.elem {
height: 200px;
overflow-y: scroll;
}
If you want the div to scroll down at least 1000px (you want a scrollbar without any content in your div), you may want the outer div to have overflow-y set to scroll, like so:
.container {
height: 200px;
overflow-y: scroll;
}
.elem {
height: 1000px;
}
EDIT: I played around with your fiddle, and it looks like the biggest thing holding you back from what you are looking for is that you are using min-height for your .moveable div.
Change it to:
.movable {
transition: all 0.3s ease;
position: absolute;
z-index: 44;
width: 100vw;
height: 100vh; /* Change was made on this line */
background-color: white;
overflow-y: scroll;
}
min-height allows your div to grow. You clearly don't want that here, since if the div can grow, there is no need for scrolling.
EDIT 2: Added bonus - to get the scrollbar back from the edge of the screen, override the default margin given to the body:
body {
margin: 0;
}
EDIT 3: Here's an updated JSFiddle: https://jsfiddle.net/anishgoyal/hvew0qx4/4/

Using pure CSS, make a div centered until it runs into sidebar from resizing the window?

I want to create a website with a single fixed-width centered column and an additional fixed-width sidebar that is position: fixed on the left. When the window is large, this works perfectly, but when I resize the window, they begin to overlap when there's plenty of room left on the right side of the window. For example:
I'd like the center div to be positioned in the center until it runs into the sidebar, at which point I'd like it to have a more fluid responsive design, where the sidebar starts to push the div to the right as you resize the window. For example:
The only solution I'm aware of is something like this (using the jQuery resize event and adding a class to the center column when the window resizes small enough):
var SMALL_WINDOW_SIZE = 560;
function checkWindowSize() {
var $content = $("#content");
if ($(this).width() < SMALL_WINDOW_SIZE && !$content.hasClass("smallWindow")) {
$content.addClass("smallWindow");
} else if ($(this).width() >= SMALL_WINDOW_SIZE && $content.hasClass("smallWindow")) {
$content.removeClass("smallWindow");
}
}
$(document).ready(function() {
checkWindowSize();
});
$(window).resize(function() {
checkWindowSize();
});
#sidebar {
background: orange;
width: 100px;
height: 200px;
position: fixed;
top: 10px;
left: 10px;
}
#content {
background: blue;
width: 300px;
height: 350px;
margin: 0px auto;
}
.smallWindow {
float: left;
margin-left: 120px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='sidebar'></div>
<div id="content"></div>
I can't help but feel there should be a pure CSS solution or one that uses less or more elegant JavaScript. Is there such a thing?

This isn't by any means the best way of achieving the desired effect with CSS, but it's the methodology behind using CSS media queries to adapt layout that I want to convey.
Obviously if this meets your needs, you'll want to adjust the numbers/widths to suit your case.
*, :before, :after{
box-sizing: border-box;
}
body {
margin: 0;
}
.wrapper {
position: relative;
padding: 20px;
}
.sidebar, .main {
padding: 20px
}
.sidebar {
position: fixed;
top: 20px;
left: 20px;
width: 200px;
background: goldenrod;
color: white;
height: 50vh;
}
.main {
margin-left: 220px;
background: mediumblue;
color: white;
height: 200vh;
}
#media (min-width: 1050px){
.main{
margin: 0 220px 0 220px;
}
}
<div class="wrapper">
<div class="sidebar">
Sidebar
</div>
<div class="main">
Main
</div>
</div>
» JSBin

How do you make a div only extend in one direction when the outer container size increases?

I'm trying to make a a page container with a navigation bar on the left (inside of the container). When the outer page is wider than the container, I would like just the navigation bar to extend left up to a certain size while the rest of the container's contents to remain the same and stay in the middle of the outer page.
To illustrate my idea, here are the before and after images, with black representing the outer page, blue the page container, pink the leftnav, and green the rest of the container.
Here is also the general structure of the code I am writing. The jsfiddle link includes some css for detail.
<div id="page">
<div id="container">
<div id="leftCol">
LEFT
</div>
<div id="rightCol">
RIGHT
</div>
</div>
https://jsfiddle.net/6L1zrj6e/1/
Currently, my container has a fixed width and automatic margins so as to center it. Is what I am trying to achieve even possible with the current layout? Would I need to move the leftnav div outside of the container?

Here's a pure css solution: fiddle
This is a trick I learned here: here
where you have to put the float first, then make the div respect it by creating a new block formatting context, then the div will expand to the remaining space. Throw in a couple min/max widths to conform it and a wrapper with min/max widths as well and it falls into place. The html background makes the body background not extend past the body as it normally would. Another little trick.
<div class="wrap">
<main></main>
<nav></nav>
</div>
html {
background: white;
}
body {
background: purple;
padding: 0;
margin: 0;
}
.wrap {
margin: 0 auto;
max-width: 1080px;
min-width: 920px;
}
nav {
overflow: auto; /* force a new context to respect float */
background: red;
height: 300px;
min-width: 200px;
max-width: 360px;
}
main {
float: right;
background: green;
height: 300px;
width: 720px;
}

You can try the following: Full screen example
jsFiddle
HTML:
(Took leftCol out of container)
<div id="page">
<div id="leftCol">
LEFT
</div>
<div id="container">
<div id="rightCol">
RIGHT
</div>
</div>
</div>
JS: (Update the width on page resize and on load)
$(window).on('resize', function(){
var containerWidth = 980;
var pageWidth = $(window).width();
var tempW = Math.max(0, pageWidth-containerWidth) / 2;
tempW += 200;
var w = Math.min(tempW, 360); // 360 = max width
var l = Math.max(0, tempW - w);
$('#leftCol').css({'width': w+'px', 'left': l+'px'});
}).resize();
CSS: (Removed floats, using absolute position for leftCol)
#page{
background-color: purple;
position:relative;
}
#container {
background-color: blue;
width: 980px;
height: 300px;
margin: 0 auto;
}
#leftCol {
position:absolute;
top: 0;
left: 0;
background-color: red;
height: 300px;
width: 200px;
}
#rightCol {
padding-left:200px;
background-color: green;
height: 300px;
width: auto;
}

This is what I think you're after - forgive me if I'm wrong!
EDIT: Added outer container wrapper for right margin:
Updated HTML:
<div id="page">
<div id="outercontainer">
<div id="container">
<div id="leftCol">
LEFT
</div>
<div id="rightCol">
RIGHT
</div>
</div>
</div>
</div>
And the CSS:
#page{
background-color: purple;
height: 300px;
}
#outercontainer {
margin: 0 5% 0 0;
}
#container {
background-color: blue;
height: 300px;
margin: 0 auto;
min-width: 300px;
max-width: 600px;
position: relative;
}
#leftCol {
background-color: red;
height: 300px;
margin-right: 200px;
}
#rightCol {
position: absolute;
background-color: green;
width: 200px;
top: 0;
right: 0;
bottom: 0;
}
This gives the #container a min and max width, and the margins will show beyond the max. These are set quite small to show up well in JSFiddle.
leftCol will expand to fit the available space, and it's right-margin prevents it overflowing the rightCol.
rightCol is absolutely positioned (within #container) in the leftCol's margin.
JSFiddle here: https://jsfiddle.net/xuew6og5/1/
The #outerwrapper allows a visible right margin, until the page gets to minimum width at least. If you want the margins to be balanced, change its margin to 0 5%
Update: New JS Fiddle with right margin: https://jsfiddle.net/xuew6og5/2/
Update 3: Sorry, I missed your requirement for a max-width of 360px on the leftCol. Updated the CSS above, and a fiddle here: https://jsfiddle.net/xuew6og5/4/

In order to achieve the wanted effect you need to move the leftCol outside of your container and give your rightCol a margin-left with the size of your leftCol.
Also add a min-width and max-width to your lefCol and a width using calc to adjust it's width to your goals.
Note: lefCol width is calculated like this:
100% / 2 - (Container width / 2 - leftCol min-width)
So your altered html looks like this:
<div id="page">
<div id="leftCol">
LEFT
</div>
<div id="container">
<div id="rightCol">
RIGHT
</div>
</div>
</div>
Your new CSS looks like this:
#page{
background-color: purple;
}
#container {
background-color: blue;
width: 300px;
height: 300px;
margin: 0 auto;
}
#leftCol {
float: left;
background-color: red;
height: 300px;
min-width:100px;
width:calc(100%/2 - 50px);
max-width:200px;
}
#rightCol {
margin-left:100px;
background-color: green;
height: 300px;
width: 200px;
}
Take a look at the updated example:
https://jsfiddle.net/xxyv7nwf/2/

CSS solution using CSS3 calc.
Edited. According to OP updates.
#media screen and (min-width: 1600px) {
#container{
margin:0 auto;
}
}
body {
overflow-x:hidden;
}
#page{
background-color: purple;
height:300px;
}
#container{
background-color: blue;
min-width:980px;
max-width: 1140px;
}
#leftCol {
float: left;
background-color: red;
height: 300px;
width: calc(100% - 780px);
}
#rightCol {
float: left;
background-color: green;
height: 300px;
width: 780px;
}
HTML
<div id="page">
<div id="container">
<div id="leftCol">
LEFT
</div>
<div id="rightCol">
RIGHT
</div>
</div>
</div>

How to make a relatively positioned child to get all parent's height

I have this layout
body, html {
height: 90%;
}
#content{
width: 100%;
height: 100%;
}
#sidebar {
position: relative;
width: 200px;
float: left;
height: 100%;
background-color: green;
}
#sidebar-content {
height: 120px;
background-color: blue;
}
#sidebar-footer {
position: absolute;
bottom: 0;
height: 50px;
width: 100%;
background-color: black;
}
#main {
position: relative;
overflow: hidden;
background-color: red;
}
#main-content {
height: 750px;
}
<div id="content">
<div id="sidebar">
<div id="sidebar-content">
</div>
<div id="sidebar-footer">
</div>
</div>
<div id="main">
<div id="main-content">
</div>
</div>
</div>
I need the sidebar to occupy all height available if it's height lower than the #main's. Setting the sidebar position to absolute solves this, but adding even more bugs, is there a solution for the relatively positioned child to get all the parent's height without specifying height of the parent in pixels?
As you can see in the fiddle, if #main exceeding the sidebar's width the sidebar is shorter, but it need to fill all the height.

CSS Flexbox does indeed solve your problem, and is the perfect answer if you don't have to support older browsers.
Basically, just adding display: flex to the container will sort this out for you.
Browsers support flexbox in a variety of ways, make sure you check the compiled CSS of that Pen to get all the browser pre-fixes and such.
Link to CodePen

You may be able to use a combination of css properties to achieve what you are looking for. The main reason you were running into trouble with the position:absolute was due to your float:left.
Have a glance through this and you may find some of the positioning and width declarations useful in your implementation:
body,
html {
height: 90%;
}
#content {
width: 100%;
height: 100%;
position: relative;
background: lightgray;
}
#sidebar {
position: absolute;
width: 200px;
height: 100%;
top: 0;
left: 0;
background-color: green;
z-index: 8;
}
#sidebar-content {
height: 120px;
background-color: blue;
}
#sidebar-footer {
position: absolute;
bottom: 0;
height: 50px;
width: 100%;
background-color: black;
}
#main {
overflow: hidden;
background-color: red;
height: 100%;
position: absolute;
top: 0;
left: 200px;
width: calc(100% - 200px);
height: 100%;
z-index: 10;
}
#main-content {}
<div id="content">
<div id="sidebar">
<div id="sidebar-content">
</div>
<div id="sidebar-footer">
</div>
</div>
<div id="main">
<div id="main-content">this is the main content
</div>
</div>
</div>

I guess jQuery solution will help you solve your problem :) Try this This will allow to have the #sidebar to have same height as the container. Hope this helps :) Happy coding.
jQuery:
$(document).ready(function(){
var wrapH = $('#content').outerHeight();
$('#sidebar').css("height", wrapH);
});
Edited:
JS Fiddle Link
$(document).ready(function(){
var wrapH = $('#main').outerHeight();
$('#sidebar').css("height", wrapH);
});
Just change the content to main. Hope this solves the issue. This will make the sidebar height be the same as the main height.

Making a div fill 100% height of screen

Heres an image of my website right now: http://i.imgur.com/nE0a0cj.jpg
The section says "What is Spheroid" is ment to be my content container. However, I can't seem to make it go from the header to the footer.
My HTML code:
<div id="container">
<h2>What is Spheroid?</h2>
</div>
My CSS Code:
html, body {
background-image:url(001.png);
background-size: 100%;
background-repeat: no-repeat;
height: 100%;
}
#container {
width: 800px;
height: 100%;
text-align: center;
margin: 0 auto;
background-color: #38788E;
}
I've tried using the "height: 100vh;" property, but it makes the container go beyond the footer so the page needs to be scrolled.
Also think it might have to be done with JavaScript, but that's a field where I'm going to need some support.
Thank you guys in advance :)
EDIT -
So I figured from one of the answers, that my div was inside another div. So I fixed this, and with the same code as provided it not looks like this: http://i.imgur.com/vYRVqhN.png
Thought it might have been the bg size, but as it is only set to "cover" it shouldn't be the issue.

Finally got your requirement, flex box layout is your friend.
View the demo in full page mode:
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
background: #eee;
}
header {
height: 40px;
background: lightgreen;
}
#container {
flex: 1;
width: 800px;
background: yellow;
margin: 0 auto;
}
footer {
height: 30px;
background: lightblue;
}
<header>header</header>
<div id="container"></div>
<footer>footer</footer>
Another approach with box-sizing:
html, body {
height: 100%;
margin: 0;
}
body {
box-sizing: border-box;
padding-bottom: 70px;
background: #eee;
}
header {
height: 40px;
background: lightgreen;
}
#container {
width: 800px;
height: 100%;
background: yellow;
margin: 0 auto;
}
footer {
height: 30px;
background: lightblue;
}
<header>header</header>
<div id="container"></div>
<footer>footer</footer>

It seems like you placed your <div id="container"> inside another div or any parent element (except html and body). If so, the parent element/s don't have a height of 100%. If you add height:100%; to the parent element your container must fill the entire height of the parent element.
I tested your code provided and it's working.