I have a page with the following basic layout:
<body>
<div id="header"></div>
<div id="wrapper ">
<div id="sidebar-container"><div id="sidebar"></div></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</body>
The css is like this:
#wrapper {
clear: both;
float: left;
width: 100%;
height: auto;
}
#sidebar-container {
float:left;
width: 10%;
height: 100%;
min-height: 500px;
padding: 20px 0px 20px 0px;
background-color: green;
}
#sidebar {
width:100%;
height: 100%;
background-color: green;
}
#content {
float: left;
width: 90%;
height: 100%;
}
#footer {
clear: both;
position: absolute;
width: 100%;
bottom: 0;
margin: 0 auto;
height: 100px;
background: url("footer.jpg") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
}
At present, the contents of #sidebar-container and #content determine the height of #wrapper. I'd like to get the divs within #wrapper to extent to the footer, which is positioned at the bottom of the browser window. Any suggestions on how to do this? Thank you.
If you support IE9 and up, you can use calc.
#wrapper {
position: relative;
height: calc(100% - {yourFooterHeight}px);
}
#wrapper > * {
height: 100%;
}
Example
body, html {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% - 100px);
}
#wrapper > * {
height: 100%;
}
#content { background-color: #ebd24b; }
#footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-color: #000;
}
<div id="wrapper">
<div id="content"></div>
</div>
<div id="footer"></div>
From what I understand, you may need to use position: fixed for the sidebar and content. A height: 100% doesn't work on elements without a position of fixed or absolute.
You'll have to update some of your other styles, like removing floats, etc., but I believe what you're trying to do requires fixed or absolute positioning. Read more about the difference here: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Additionally, I would recommend investigating semantic HTML tags like footer and header. This doesn't affect the layout here, but it would be good to get in the habit.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list
It can be a challenge as you content and sidebar have no relationship i.e. both on same level. You would need to have one of them be the parent of the other or you would need to write some JS. You can use pseudo elements in pure CSS, but in essence you would still need to have one of them "lead" as some element needs to be the box size relationship master.
Example, in Angular I use the following directive. You can then use min-height on the right column to keep a min height, after that it will automatically adjust the left (sidebar) to match the content area:
mmeMain.directive('mirror', function () {
return {
restrict: 'A',
link: function (scope, elem, attr) {
scope.$watch(function () {
angular.element(document.getElementById(attr.mirrorReflect)).height(elem.height()-85);
});
}
};
});
HTML
<div id="leftColumn" class=sidebar col-xs-6 ">
// html code
</div>
<div id="rightColumn" class="content form-column col-xs-6" mirror mirror-reflect="leftColumn" >
// html code
</div>
Related
I'm trying to create 2 divs, one of them is the left sidebar and the other one is the body of the page where content shows up. What I'm trying to do is:
make the sidebar div height 100%
the body height 100% too
make the body's width change when sidebar width changes.
This is the code that I've tried so far:
#Sidebar{
background-color:#F0F0F0;
height: calc(100% - 80px);
width: 257px;
position: fixed;
left: 0;
bottom: 0;
overflow: hidden;
white-space: nowrap;
}
#content {
margin: 0;
position: fixed;
height: 100%;
}
when I do this, the content div shows IN the Sidebar!
#Sidebar {
height: calc(100% - 80px);
width: 257px;
position: fixed;
top:0;
left: 0;
bottom: 0;
overflow: hidden;
white-space: nowrap;
border:1px solid #000;
}
#content {
margin: 0;
position: fixed;
height: 100%;
border:1px solid tomato;
}
<div id="Sidebar">
Hello World!!
</div>
<div id="content">
Content Div
</div>
Note that i use Jquery .Resizable to change the width.
and this is a jsfiddle https://jsfiddle.net/j64r3bm1/
Can't You just put the sidebar
.sidebar {
position: fixed;
height: 100vh;
left: 0px;
top: 0px;
width: 275px;
}
and the body container
body {
padding-left: 275px;
}
it will never overlap and you can just build your body as you wish.
The fun thing about this is when you use media-queries to handle mobile version - you can just remove padding and move sidebar outside of body and on some button (or anything) make it slide into view.
Set the margin-left of your main content to the same width (+gap if you prefer) and change it when you resize your sidebar.
#content {
margin-left: 257px;
Updated fiddle: https://jsfiddle.net/j64r3bm1/2/
To explain what's happening: when you use position:fixed, it no longer takes up space and effectively 'hovers' on the page, so when your content div comes along, it gets put at left:0 because they're nothing to its left that's taking up space on the page.
You could also use position:fixed on your content and set the left - but then neither will take up 100% height (as they will both be 0width/0height).
Alternatively, you could take out the position:fixed and use float:left.
Looks like i figured out how to do it.
and I used JQuery to do that, all what i did is :
#Sidebarlist
{
background-color: var(--SidebarBackgroundColor);
height: calc(100% - 80px);
color:var(--SidebarTextColor);
width: 257px;
position: fixed;
left: 0;
bottom: 0;
overflow:hidden;
white-space: nowrap;
}
#MainContentdiv {
height: 100%;
}
And using jquery :
$('#Sidebarlist').resizable({
start: function( event, ui ) {},
stop: function( event, ui ) {},
handles: 'n,w,s,e',minWidth: 200,
maxWidth: 400
});
$( "#Sidebarlist" ).on( "resizestart", function( event, ui ) {
var marginleft = $("#Sidebarlist").width();
$('#MainContentdiv').css('margin-left',marginleft);
});
$( "#Sidebarlist" ).on( "resizestop", function( event, ui ) {
var marginleft = $("#Sidebarlist").width();
$('#MainContentdiv').css('margin-left',marginleft);
});
Thanks for anybody that answered my question.
You can simply add
left: 257px;
top: 0;
To the #content div and it will appear how you want it. To get this to resize, you'd adjust this. The alternative is to use a container, like this:
#Container {
height: 100%;
position: fixed;
width: 100%;
top: 0;
left: 0;
display: flex;
flex-direction: row;
}
#Sidebar {
height: calc(100% - 80px);
width: 257px;
display: block;
overflow: hidden;
white-space: nowrap;
border:1px solid #000;
}
#content {
margin: 0;
height: 100%;
border:1px solid tomato;
}
<div id="Container">
<div id="Sidebar">
Hello World!!
</div>
<div id="content">
Content Div
</div>
</div>
I'm gonna give you an out there answer, I've tested this in firefox and chrome and it works. But it's a bit cutting edge so I'm not sure if IE will support it.
It's using css variables, if you have a different variable in at the start (in the :root section) then the page will be calculated differently.
I also took your borders out as they mess with total width and used background colours to tell the divs apart.
EDIT:
I've added a tiny amount of JS to show the variable being updated on the fly and everything readjusting.
changeSidebar = function() {
var customSize = document.querySelector('.sidebar-width').value;
document.documentElement.style.setProperty('--menu-width', customSize + 'px');
}
:root {
--menu-width: 257px
}
#sidebar,
#sidebar-footer {
width: var(--menu-width);
left: 0;
overflow: hidden;
position: fixed
}
body {
margin: 0
}
#sidebar {
height: calc(100% - 80px);
top: 0;
white-space: nowrap;
background: orange
}
#sidebar-footer {
height: 80px;
top: calc(100% - 80px);
background: pink
}
#content {
position: fixed;
right: 0;
width: calc(100% - var(--menu-width));
height: 100%;
background: tomato
}
<div id="sidebar">
Hello World!!
</div>
<div id="sidebar-footer">
I'm just here to fill that space...
</div>
<div id="content">
Content Div
<br />
<input class="sidebar-width" value='257'>
<button onclick="changeSidebar();">Enter</button>
</div>
That is the Solution :
var offsetHeight = document.getElementById('Sidebar').offsetHeight;
document.getElementById('content').style.height = offsetHeight+'px';
#Sidebar{
background-color:#F0F0F0;
height: 700px;
width: 10%;
float:left;
left: 0;
bottom: 0;
overflow: hidden;
}
#content {
margin: 0;
width:90%;
float:right;
background-color:green;
}
<div id="Sidebar">
Side bar
</div>
<div id="content">
Hello World !
</div>
I've got a group of divs like so:
<div id="container">
<div id="tabs">
<div class="row"><div class="tab">....</div></div>
...
</div>
</div>
with the following css:
#container {
position:absolute;
top:48px;
bottom:0px;
width:100%;
}
#tabs {
display:table;
height:100%;
}
.row {
display:table-row;
}
.tab {
display:table-cell;
text-align:center;
vertical-align:middle;
}
This creates a group of element all the same height vertically down the left side of my area. The problem is, I want the .tabs to be square. Since the tabs are dynamically sized to fit the vertical space, I can't define a width. How can I make the width match the height? Ideally this should be done without JavaScript, and pure css/html.
Here's a fiddle as requested.
See this fiddle
I've used a simple JS as below
<script>
var th = $('.tab').height();
$('.row').css({'width':th+'px'});
</script>
Please note that this <script> should be loaded in document.ready only after the body has loaded.
If you can do away for the 48px position from top, you can use this solution:
body {
margin: 0;
}
#container {
bottom: 0;
position: absolute;
width: 100%;
}
.row {
padding-bottom: 14.28571429%;
position: relative;
width: 14.28571429%;
}
.tab {
bottom: 0;
font-size: 20px;
height: 20px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
Explanation
It leverages the fact that padding is bound to the width of the element it's attached to. You make the outer element .row square by this, using 1/7th of the available screen size in height. By setting a position on the outer element and the inner .tab to position: absolute, you can also use a nifty trick by setting margin: auto along with top, right, bottom and left to 0. You need to specify a height for this element for it to work. Hence the font-size and corresponding height, assuming you only need to center one line of text. By adjusting the height, you can fine tune possible off-positioning caused by a fonts' baseline shift.
I have tinkered with the idea and here's what I have come up with, for what it's worth. As written in a previous comment, I do not believe there is a CSS only solution. However, the JS required is minimal.
HTML
<div id="container">
<div id="tabs">
<div class="row">
<div class="tab"><span>1</span></div>
</div>
<div class="row">
<div class="tab"><span>2</span></div>
</div>
<div class="row">
<div class="tab"><span>3</span></div>
</div>
<div class="row">
<div class="tab"><span>4</span></div>
</div>
<div class="row">
<div class="tab"><span>5</span></div>
</div>
<div class="row">
<div class="tab"><span>6</span></div>
</div>
<div class="row">
<div class="tab"><span>7</span></div>
</div>
</div>
</div>
CSS
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
#container {
width: 100%;
height: 100%;
}
#tabs {
width: 100%;
height: 100%;
}
.row {
position: relative;
height: 14.28571429%;
}
.tab {
display: block;
position: relative;
background-color: #008000;
}
.tab span {
position: absolute;
height: 20px;
font-size: 20px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
text-align: center;
}
JS
var adjustHeight = function() {
var rowHeight = $('.row').height();
$('.tab').each(function(){
$(this).height(rowHeight);
$(this).width(rowHeight);
});
}
adjustHeight();
$(window).on("resize", function() {
adjustHeight();
});
In case you want to play around with it, I have created a Codepen: http://codepen.io/anon/pen/WvvWPE
Update: I have edited the Codepen to calculate the height of the rows automatically instead of setting it via CSS.
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!!!
This is perhaps a common question, but all the answers I have found around the web, didn't work properly.
I want to create a sidebar for my webpage, which fills the entire height of the webpage.
Then when you scroll the sidebars content should move along the rest of the sites content.
I tried this methods:
HTML:
<div id="wrapper">
<div id="sidebar"></div>
<div id="content-area"></div>
</div>
CSS:
body {
margin: 0;
}
#wrapper {
width: 100%;
}
#sidebar {
width: 280px;
position: absolute;
top: 0;
bottom: 0;
}
#content-area {
width: 900px;
margin-left: 280px;
}
..and:
HTML:
<div id="wrapper">
<div id="sidebar"></div>
<div id="content-area"></div>
</div>
CSS:
body {
height: auto;
min-height: 100%;
margin: 0;
}
#wrapper {
width: 100%;
height: 100%;
}
#sidebar {
width: 280px;
height: 100%;
float: left;
}
#content-area {
width: 900px;
height: 100%;
float: left;
}
The first one works fine, until the content is extended: http://jsfiddle.net/B3bCb/1/
If that happens then the sidebar stops according to the browser-window height.
The second one didn't worked at all: http://jsfiddle.net/B3bCb/2/
I have also tried the faux column method, but I need to have an CSS-shadow (which blur, spread and color, can be changed dynamically on the site) on my sidebar, which I cannot do properly in the faux column method (Faux column is just an image).
So how do I make my sidebar 100% in height, no matter how much content I have?
Making the sidebar position as "fixed" it stays, doesn't matter how much content you have. I don't know if I solve your problem but hope it helps ;)
Here's the code:
#sidebar {
width: 280px;
position: fixed;
top: 0;
bottom: 0;
background: blue; }
Here's the fiddle
The following css can be another alternative for this
#sidebar {
width: 280px;
position: fixed;
top: 0;
height:100%;
background: blue;
}
#content-area {
position:relative;
left: 280px; // width of your side box.
}
You have a couple of choices, but the gist is to do with CSS position.
The reason position: absolute; does not work is because it needs some tweaking for that to work. You need to disable scrolling on the html, body, and wrapper classes, and enable scrolling on the content-area.
html, body, wrapper {
overflow: hidden;
}
.content-area {
overflow: auto;
}
You can see an example of this here. It's a responsive sidebar layout I made.
The other option is to use a position: fixed; on the sidebar, as others have noted.
Check this fiddle http://jsfiddle.net/dJ654/2/
I have changed some styles
#sidebar {
width: 10%;
height: 100%;
position:fixed;
right:0px;
top:0px;
background-color:gray;
}
#content-area {
width: 90%;
height: 100%;
float: left;
background-color:green;
}
I am trying to do the following in a CSS template:
Dock the footer to the bottom when there is not enough content to
fill the page
Stretch the header and footer background across the whole width
Position all the content in the middle of the page
This is the code I have, created with help on here:
http://tinkerbin.com/lCNs7Upq
My question is, I have seen a few ways to achieve this. Is this the best? It seems a shame to have to have the empty div as well, is this a bodge?
You can fix and element to the footer using CSS:
position: fixed;
bottom: 0;
However, I'm trying to figure out what exactly your trying to do.
You header and footer should automatically go 100% across the page if it's a div.
Your middle section can be set to height: auto; via css and will fill up the viewport pushing the footer all the way to the bottom, but to do this you also have to set the body to 100% in order to get it to work.
html, body, #content {
height: 100%;
min-height: 100%;
}
#header {
height: 100px;
width: 100%;
background: blue;
position: fixed;
top: 0;
}
#content {
height: auto;
margin: 100px auto;
background: green;
}
#footer {
position: fixed;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}
Your HTML should look somewhat like this:
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
Working Example: http://jsfiddle.net/s4rT3/1/
This is the best example I have seen:
http://css-tricks.com/snippets/css/sticky-footer/
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
Update: In 2019 using flex is a better option.