Here is my JSFiddle thus far.
What should I do to make sidebar stretch vertically (height) on the entire page? Right now it stretches to the original height of web browser window, but when there is more content inside the container, the sidebar does not stretch with it.
HTML:
<div class="main-content">
<div class="sidebar">
menu
</div>
<div class="content">
... a bunch of content ...
</div>
</div>
CSS from the above JSFiddle:
html, body {
width: 100%;
height: 100%;
}
.main-content {
width: 100%;
height: 100%;
}
.sidebar {
width: 100px;
float: left;
background-color: #000;
color: #fff;
min-height: 100%;
}
.content {
width: 200px;
float: left;
}
I don't think there is a "pure" css solution for this issue. The problem is that your sidebar is 100% height of it's parent container. And it's parent container main-content is 100% height of it's parent (the window). So for your content to be the same height as main-content's inner content you would then have to set a pixel height value to main-content.
However you could easily resolve this with jquery.
var sidebar = $('.sidebar');
var content = $('.content');
if (content.height() > sidebar.height() )
sidebar.css('height', content.height());
else
sidebar.css('height', sidebar.height());
Fiddles:
http://jsfiddle.net/up7Zg/29/ and http://jsfiddle.net/up7Zg/30/
try this
.sidebar {
position: absolute;
top: 0;
bottom: 0; /* this line, and the one above, confer full-height */
left: 0;
width: 30%;
background-color: #f90; /* adjust to taste, just to see where the element was rendered */
}
Related
This question has been asked an awful lot of times here, but I am yet to find a conclusive answer to this.
I'm working to implement right and left 100% height, fixed sidebars in my design. The Left sidebar works great, but the right one floats over the (min-width'd) content when the browser is resized.
When I set the position of the bars to absolute, it behaves well with horizontal window resizing, but then the sidebars aren't fixed on vertical scroll.
Check out my jsfiddle: http://jsfiddle.net/wjhzyt0u/17/
(If you resize the window, you can see the right blue bar float over the middle grey content).
HTML
<div class="wrapper">
<section id="sidebar-nav">
</section>
<section id="content">
<p>some rad stylin' content</p>
</section>
<section id="sidebar-notif">
</section>
</div>
CSS
html, body {
position: relative;
width: 100%;
height: 100%;
}
.wrapper {
position: absolute;
height: 100%;
width: 100%;
min-width: 450px; /* dont want to squish the content too much */
}
#sidebar-nav, #sidebar-notif {
position: fixed;
height: 100%;
width: 150px;
background: lightblue;
}
#sidebar-nav {
top: 0;
left: 0;
}
#sidebar-notif {
top: 0;
right: 0;
}
#content {
margin: 0 150px;
height: 300px;
background: lightgrey;
border: 2px solid yellow;
}
Any help would be very welcome!!
My 'solution' for anyone else looking at a similar situation.
I ended up going with absolutely positioned sidebars (which scale to the size of the middle content), and added the Waypoint sticky plugin to scroll the sidebar content.
Updated JsFiddle: http://jsfiddle.net/wjhzyt0u/20/
Sticky divs stick to the top of the page on scroll - thus creating the illusion of 100% height sidebars.
Drawbacks are extra js weight + page load times.. but I'll take it for now.
Changes:
.wrapper {
position: absolute;
width: 100%;
min-width: 500px;
// removed 100% min-height, which lets the sidebars stretch to 100% height of the content.
}
#sidebar-nav, #sidebar-notif {
position: absolute; // changed to absolute from fixed.
height: 100%;
width: 150px;
background: lightblue;
}
// added sticky divs to sidebars, which stick to the top of the page on scroll (with help from Waypoints sticky plugin.
.sticky {
border: 1px solid red;
}
I'm having an issue with a fluid sidebar and a content box next to it.
I designed my left #sidebar to my liking, but not I'm having trouble making a content box that fills up the remaining space next to it.
I'd like to have the whole project take up 100% of the page width. The problem is coming from the min/max widths on my sidebar.
Been goin' hard on this all day and still having problems, void space between, overlapping ,ect.
http://jsfiddle.net/DrDavidBowman01/PjLgE/
CSS
#container {
width: 100%;
display: block;
height: 100%;
}
#sidebar {
display: block;
width: 22%;
float:left;
min-width: 236px;
max-width: 332px;
height: 100%;
position: fixed;
border: 2px solid #0C6;
background-color: #000;
}
#content {
width: 88%;
height: 400px;
border: 6px solid #F00;
display: block;
color: #fff;
float: left;
position: relative;
max-width: calc(88% - 236px);
min-width: calc(88% - 332px);
}
HTML
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
It's a combination of two things. First, if you want to have divs take up 100% height, then you'll need to set the body and html to that as well.
html, body {
height: 100%;
}
Second, you have set the sidebar as position: fixed. This is just like having position: absolute set on it. If you want the sidebar to remain visible at all times, you can do a margin-left: 22%; (or whatever the width of the sidebar is) on #content. If you want the sidebar to flow with the rest of the page, just remove the fixed position.
This is because your sidebar is position: fixed. The best route would be to relatively position/float the sidebar at 100% height and position a fixed wrapper within it.
basic demo
I have an HTML page which is divided into 4 sections.
Header
Menu
Content
Footer
I am using 1 div for each section and 1 div which wraps all the 4 divs.
My header's height is 50px, the menu's height is 50px, and the footer's height is 20px.
Then I try setting the menu's height to 100%. Menu div is taking the height of its container which is creating scrollbars in my page.
The CSS is as follows:
html, body {
margin: 0px;
height: 100%;
width: 100%;
min-width: 1024px;
min-height: 500px;
}
#container {
width: 100%;
height: 100%;
}
#header {
width: 100%;
height: 50px;
}
#menu {
width: 100%;
height: 50px;
}
#content {
width: 100%;
height: 100%;
}
#footer {
width: 100%;
height: 20px;
}
Is it possible with CSS alone or I have to use JavaScript also?
Here is another Pure CSS solution, that works without specifying any height whatsoever.
[this solution deserves its own answer]
Here's a Working Fiddle
Why is it good?
because maybe your header will change one day affecting his height, or your menu will grow, or your footer will need an extra line causing his height to grow..
all of that changes will cause you to re-fix another height for the changing element, and recalculate the right height for the content.
my solution makes it easier, because all the parts are fluid.
let them take the space they need in the page, and the content will always take the remaining height.
Browser support:
Tested On: IE10, Firefox, Chrome, Safari, Opera. (not working on older IE, not tested on other browsers)
any Downsides?
yes. unfortunately, because of the way that this trick works, you will need to change the arrangement of your HTML.
I found a Pure CSS way to create a div container, with two child div's.
the first will take the exact height he needs, and the second will take the remaining of the container height's.
but what if I want the opposite scenario,
What if I want second div to take his exact space and the first div to take the container's remaining height?
I didn't find an easy way to do that with Pure CSS.
thats why, I actually reverse the order of the divs, the first holds the second data, and the second holds the first data, now we let the first div to take his exact height, and the second stretch to the end of the container as we want, and then I rotate their view via CSS to make them appear in order.
For your case it means that you will have to create the HTML in that order.
Header
Menu
Footer
Content
The Solution:
HTML:
<div class="Container">
<div class="Header">I'm in the header</div>
<div class="Menu">I'm in the menu</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">I'm in the footer</div>
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="Content">
I'm in the content
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.Header
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Menu
{
/*for demonstration only*/
background-color: #6ea364;
}
.Content
{
height: 100%;
overflow: auto;
/*for demonstration only*/
background-color: #90adc1;
}
.Footer
{
/*for demonstration only*/
background-color: #b5a8b7;
}
Here's a thought. May not work for your specific problem, but it does address the issue of mixing pixels and percents. Under the current definition of the problem, you use a fixed height for both the top (header, menu) and bottom (footer). But you want to have the content take up the rest. One solution would be to pad the top and bottom of the container with the same height of the header and menu on top and the same height as the footer on the bottom. The problem then is that you have a 100% height container plus 100px on top and 20px on bottom. But there's a CSS convention for that. It's called box-sizing and is very cross browser compatible (as long as you include -moz). in effect, it calculates 100% height after including the padding. Therefore, 100% height plus all the padding still equals 100% height.
In practice it looks like this
HTML
<div class="container">
<div class="header"></div>
<div class="menu"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
CSS
html, body, .container {
min-height: 100%;
background:#eee;
}
.header {
height: 50px;
position: relative;
z-index: 1;
}
.menu {
height: 50px;
position: relative;
z-index: 1;
}
.footer {
height: 20px;
width: 100%; /* needed because this one is position absolute */
bottom: 0%;
position:absolute;
}
.content {
height: 100%;
width: 100%; /* needed because this one is position absolute */
top: 0%;
left: 0%;
padding-top: 100px;
padding-bottom: 20px;
position:absolute;
box-sizing: border-box; /* here's the kicker */
-moz-box-sizing: border-box;
overflow: auto; /* don't panic. they take the place of normal scroll bars*/
}
Demo
http://jsfiddle.net/WLR5S
Source
http://jsfiddle.net/WLR5S/show
http://jsfiddle.net/WLR5S/6/show (with -moz for firefox)
Pros
Obviously, the point is that you can have 100% height elements with padding to compensate for footer and header
Cons
You have to use position absolute for the content and footer, and you have to apply position relative with z-index to the header area
EDIT
After a little more experimenting, I found that it's probably best to use height instead of min-height and apply overflow:auto or the like. That way the page has appropriate sidebars if the content gets to be too large: http://jsfiddle.net/WLR5S/2/ or http://jsfiddle.net/WLR5S/3/
Pure CSS Solution
using calc() (CSS3)
Working Fiddle
HTML:
<div id="container">
<div id="header">header</div>
<div id="menu">menu</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
CSS:
html, body {
margin: 0px;
height: 100%;
/*min-width: 1024px;
min-height: 500px;*/ /*You can uncomment that back if you want)*/
}
#container {
height: 100%;
}
#header {
height: 50px;
}
#menu {
height: 50px;
}
#content {
height: calc(100% - 120px); /*120 = 50 + 50 + 20*/
overflow: auto;
}
#footer {
height: 20px;
}
notice I removed your width:100% because this is the default behavior of a block element like a div.
This can also be done without stating any height at all, with Pure CSS.
Check my second answer in that page.
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 a main div contains two divs (one for heading and other for content). the main div is placed at the bottom of the html page with absolute positioning. When I hide content div, it sill takes up space in the bottom of the page.
I need to show only the header div to do a jquery toggle..
<div class="tll">
<div class="tllH">
</div>
<div class="tllC">
</div>
</div>
<style>
.tll{
background: yellow;
height: 100px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
.tllH{
background: green;
height: 20px;
width: 100%;
}
.tllC{
background: magenta;
height: 80px;
width: 100%;
display: none;
}
</style>
For .tll, you set a height of 100px.
.tllH is only 20px and coincidentally .tllC is 80px.
This is because the height of main container is fixed,The solution is present in this fiddle.
Setting .tll{height: auto} fixed the issue!