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;
}
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 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.
just a quick question. I have recently dicovered the use for percentages and positioning in css. However I'm having a little trouble with moving elements.
I have two Images one on the left side of the screen and one on the right. both images are set to relevent positioning. The issue im having is getting the image on the right to stay put rather than moving to stay in frame of the window. How would I achieve this using percentages?
Css
.left {
position:relative;
left:0%;
z-index:250;
}
.right {
position:relative;
right:100%;
z-index:250;
}
ADDED ON REQUEST
/* -- page layout */
#wrapper {
position:relative;
width:auto;
height:auto;
margin:0;
padding:0;
z-index: 0;
}
#wrapper #head{
position:relative;
width:100%;
height:50px;
z-index:200;
margin:0;
margin:0;
}
Note
These images are placed within a a div, that spans 100% of the screen. Thanks again!
If I follow you correctly, try
.right {
position:relative;
left: 80%;
z-index:250;
}
I recommend using float instead.
http://jsfiddle.net/beautifulcoder/HCjvK/
/* -- page layout */
#wrapper {
position:relative;
width:auto;
height:auto;
margin:0;
padding:0;
z-index: 0;
min-width: 1280px;
overflow:hidden;
}
This has fixed it for me! Thanks for all your help!
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;
}
I'm working on a split in 4 screen layout for a website.
I thought I'd just set 4 divs, 50% of height and width, float left and right.
But I need to add a menu bar in the middle of all this.
I did it by adding a div after the first 2 divs, and set the menu bar div "clear" css tag to "both".
I'm almost there...the thing is that there's this scroll bar appearing since now, it's 50% + menu bar height + another 50%...
I just need to find a way to make the menu bar fit in this...without having a scroll bar on the right when the window is smaller. (I was using overflow : hidden at first, but people with small screens will not see the drop down items from the menu).
Here's my fiddle (that's a simple way to show my issue)
Any idea? Thank you!
EDIT :
Look what it does when you resize the window, and scroll with images : http://jsfiddle.net/ttCJG/2/
Try this - http://jsfiddle.net/ttCJG/1/
#menu-bar {
height:30px;
width:500px;
background-color:black;
left:0;
right:0;
margin: auto;
clear:both;
color:white;
position: absolute;
top: 50%;
margin-top: -15px;
}
Remove the height for the menu bar from the top and bottom <div>s
Example:
Top Divs: 40%
Menu: 20%
Bottom Divs: 40%
They might need to be tweaked but that's it in a nutshell. Try something like this CSS:
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
}
#test1 {
width:50%;
height:47%;
float:left;
background-color:red;
}
#test2 {
width:50%;
height:47%;
float:right;
background-color:blue;
}
#test3 {
width:50%;
height:47%;
float:left;
background-color:green;
}
#test4 {
width:50%;
height:47%;
float:right;
background-color:yellow;
}
#menu-bar {
height:6%;
width:100%;
background-color:black;
margin:0;
clear:both;
color:white;
}