I did a sketch http://i.imgur.com/cx3jXPu.jpg so sidebar has to drag down all the way together with the content sidebar.
its height should be 100% as well as all of its parents divs
html, body{
height:100%;
width: 100%;
}
.container{
width:100%;
height:100%;
border:1px solid red;
}
.sidebar{
width:25%;
height:100%;
background:gray;
}
http://jsfiddle.net/ahmedskaya/Bek9L/1863/
Using a jquery you can achieve it easily.
$(document).ready(function(){
$("#side").height( $("#main").height() );
});
Here is CSS also.
#side{background: gold;}
#side, #main{float:left; width:200px;}
Here is the Demo.
Related
I'm making a small website. The background is filled with a picture, say, a map. On the right is an overlay on top of the picture. The overlay has a title, and a list below it.
Now I cannot get to have the list get a scrollbar if it is too large to fit in the screen.
I do not want the page to scroll: the background fills out the screen 100%. I do not want the complete overlay to scroll (comment out the first CSS comment to get this). I also do not know the size of the title beforehand - if I knew that, it would be easy (simply comment out the second comment in the CSS, and hey presto, works). I can go the long way, and have javascript watch the title panel size, but I'd rather have a plain CSS/html solution.
Any ideas?
Code:
<html>
<style>
div {
font-size:1.5em;
padding:10px;
background-color:green;
}
html, body {
height:100%;
margin:0;
}
.panels {
position:fixed;
top:50px;
right:50px;
bottom:50px;
/* overflow:auto; */
}
.list {
/* position:absolute;left:10px;right:10px;top:150px;bottom:20px; */
background-color:white;
overflow:auto;
}
</style>
<div class='panels'>
<div class='header'>Some title or other</div>
<div class='list'>
<ul>
<li>Entry</li>
...lots of entries...
<li>Entry</li>
</ul>
</div>
</div>
</html>
JSFiddle: http://jsfiddle.net/95ajc0us/
Add height:100% for the second div.
.list {
background-color:white;
overflow:auto;
height:100%;
}
DEMO
If you wish the list should scroll down in case of more entries.
Just write down :
ul{
overflow:scroll;
height: 200px;
}
for your UL(Unordered list)
Please feel free to ask again we are not on same page..
Thanks
you have fixed the html and body position.
instead fix the position of header
.header{
position:fixed;
width:100%;
left:0;
top:0;
}
link
You'll need to adjust the top and bottom properties to taste:
div
{
font-size:1.5em;
padding:10px;
background-color:green;
}
html, body
{
height:100%;
margin:0;
}
.panels
{
position:fixed;
top:50px;
right:50px;
bottom:50px;
}
.list
{
position:absolute;
left:10px;
right:10px;
top:150px;
bottom:20px;
background-color:white;
overflow-y:scroll;
}
scroll is missing because you have a fixed panel, which will prevent the div from scrolling
you need to fix header, not list
.header{
position:fixed;
width:100%;
top:0;
}
demo
final edit (updated fiddle on Suresh Ponnukalai answer)
I am trying to scroll a content child of a fixed div. I am trying to scroll without the scroll bar being visible (using the mouse scroll). I have pretty much tried all the solutions I came across on Stackoverflow and on google in general but no success.
Please find here the JSfiddle of the problem:
THE CSS:
#left-panel {
position:fixed;
height:100%;
top:0px;
left:0px;
border:1px solid red;
width:220px;
overflow: hidden;
}
nav {
position:relative;
height:100%;
overflow-x:hidden;
overflow-y:auto;
}
JS FIDDLE:
http://jsfiddle.net/5Xg5v/2/
Please note that the parent div must be fixed and must be 100% height.
Thank you in advance!
You could kinda hack it cross-browser by expanding the width of the nav element and force scrollbars. Updated JSFiddle.
nav {
position:relative;
height:100%;
width: 110%; /* <---- */
overflow-x:hidden;
overflow-y:scroll; /* <---- */
}
Of course, you'll want to adjust the percentage to your needs or use calc( 100% + 15px ).
You can try the following :
#left-panel {
position:fixed;
height:100%;
top:0px;
left:0px;
border:1px solid red;
width:220px;
overflow:hidden;
}
nav {
height:100%;
overflow-y:auto;
overflow-x:hidden;
width:100%;
padding-right: 15px;
}
Example
You can style the scrollbar using webkit.
element::-webkit-scrollbar {styling here}
In order to hide the scroll bar on your nav element you can use the following:
nav::-webkit-scrollbar {
width:0!important;
}
Easiest (I hope) to just check it out here: http://jsfiddle.net/UG7un/
There is a fixed wrapper that covers the whole page with a 20px margin. How do I get content to scroll within that wrapper?
<div id="wrap">
<div id="content">
<p>How can I get this to scroll within this white content area only, using the native browser scroll?</p>
</div>
<div id="photo"></div>
</div>
html {
background:url(http://i1210.photobucket.com/albums/cc406/Ingutuks/2012/P5211369.jpg) no-repeat center center fixed;
background-size:cover;
}
#wrap {
background:#fff;
margin:20px;
position:fixed;
overflow:hidden;
}
#content {
width:45%;
padding:2.5%;
float:left;
}
#photo {
width:50%;
background:url(http://i1351.photobucket.com/albums/p790/KrazyKobraRawr/Jojothecat_zps448af247.jpg) no-repeat center center;
background-size:cover;
float:right;
}
If I understand correctly then you can use overflow:auto; in your wrap div.
#wrap {
background:#fff;
margin:20px;
position:fixed;
overflow:auto;
}
it will show the scroller in your wrap div.
You need to specify height;
#content {
overflow:auto;
height:360px;
width:45%;
padding:2.5%;
float:left;
}
http://jsfiddle.net/UG7un/1/
You mean like this?
http://jsfiddle.net/UG7un/3/
Commented out the:
position:fixed;
and a couple lines of the JS.
I am trying to create a webpage layout with a header/footer (100% width, 145px height), a 'main area' between the header/footer (100% width, dynamic height), and a container around the content that is a unique background color (860px width, dynamic height but is always 'flush' against the footer).
(See Example for a visual)
The problem I am having is I can't seem to have the 'content container' always be flush with the footer when there is minimal content. Using a setup like the (original example) results in the footer floating over the content if there is a respectable/'normal' amount of content or if the window is resized.
And the Following CSS results in a gap between the content and the footer.
html,body{
margin:0;
padding:0;
height:100%;
background:yellow;
}
.wrap{
min-height:100%;
position:relative;
}
header{
background:blue;
padding:10px;
}
#content{
height:100%;
width: 400px;
margin:0 auto;
background:orange;
padding:30px;
}
footer{
background:blue;
position:absolute;
bottom:0;
width:100%;
height:60px;
}
How can I make the content container be the full height of the screen when content is minimal and have the footer 'stick' to the bottom of the page, while also being dynamic to resize appropriately if there is a normal amount of content (footer is always at the bottom of the content)?
Thank you!
FIDDLE: http://jsfiddle.net/3R6TZ/2/
Fiddle Output: http://fiddle.jshell.net/3R6TZ/2/show/
CSS
html, body {
height: 100%;
margin:0;
}
body {
background:yellow;
}
#wrapper {
position: relative;
min-height: 100%;
vertical-align:bottom;
margin:0 auto;
height:100%;
}
#header {
width: 100%;
height: 150px;
background:blue;
position:absolute;
left:0;
top:0;
}
#content {
background:pink;
width:400px;
margin:0 auto -30px;
min-height:100%;
height:auto !important;
height:100%;
}
#content-spacer-top {
height:150px;
}
#content-spacer-bottom {
height:30px;
}
#divFooter {
width:100%;
height: 30px;
background:blue;
}
HTML
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
<div id="content-spacer-top"></div>
<div id="content-inner">
**Content Goes Here**
</div>
<div id="content-spacer-bottom"></div>
</div>
<div id="divFooter">Footer</div>
</div>
UPDATE
The #content-spacer-top and #content-spacer-bottom are used to pad the #content div without using padding or margin that would increase the box size past the 100% height causing problems.
In CSS3, there is the box-sizing property (more info here) that can fix this issue, but i'm assuming you don't want to depend on CSS3 features.
EDIT
Added a fix and tested down to IE7
UPDATE 2
Alternate method using :before and :after pseudo-elements instead of the spacer divs:
http://jsfiddle.net/gBr58/1/
Doesn't work in IE7 or 6 though, and to work in IE8, a <!DOCTYPE> must be declared (according to w3schools.com), but the HTML is nice and clean
UPDATE 3 (Sorry for so many updates)
Updated it to work down to IE6. I don't normally bother as my company doesn't support IE6, but it was an easy fix...
I think you need position: fixed on the footer:
footer {
width: 100%;
height: 30px;
position:fixed;
bottom:0;
}
I'm creating a sidebar with this CSS code:
.sidebar {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 30%;
height: 100%;
border-right: 1px solid #333;
}
But the sidebar width doesn't scale when I change the browser width. How can I make the sidebar fluid?
Thanks.
Look at the height in body in CSS part.
Here is a working example for you:
Your HTML:
<div id="content">
<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>
</div>
<div id="sidebar">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
Your CSS:
body {
margin:0;
padding:0;
width:100%; /* this is the key! */
}
#sidebar {
position:absolute;
right:0;
top:0;
padding:0;
width:30%;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#content { margin-right: 200px; }
Its kind of an odd issue, but it seems its challenging to get the background color to stretch to the bottom of both columns, when using fluid layout.
I included the workaround along with a simple 2 column fluid layout.
Try this- jsFiddle
html, body {
margin:0;
padding:0;
background:silver;
/* workaround to get the columns to look even,
change color depending on which column is longer */
}
#sidebar {
position:absolute;
left:0px;
top:0px;
padding:0;
width:30%;
background:silver;
word-wrap:break-word;
}
#content {
position:absolute;
right:0px;
width:70%;
word-wrap:break-word;
background:gray;
}