I have three divs in the following manner: outermost div then inside it the middle div and then inside it the innermost div.
like this ...
.outer{
width: 100%;
height: 110vh;
background-color: red;
overflow: hidden;
}
.middle{
width: 100%;
height: 100vh;
border: 3px solid black;
overflow: scroll;
}
.inner{
width: 100%;
height: 102%;
background-color: cyan;
}
<div class="outer">
<div class="middle">
<div class="inner"></div>
</div>
</div>
what I want to know is, when I scroll inside the innermost div then it scrolls and if it is scrolled completely then it stops, and then when I stop the scroll of the mouse wheel and start again then the window scrolls ...But what I want is, to scroll in one go.. like if I'm scrolling the inner div when it is completely scrolled then the window scroll should start immediately without actually stopping the mouse wheel and starting again.
Is it even possible?
Give this a try. I wouldn't recommend using view height especially if you want scroll to function as intended.
html,
body {
height: 100%;
width: 100%;
}
.outer {
width: 100%;
height: 100%;
background-color: red;
overflow: hidden;
}
.middle {
width: 100%;
height: 100%;
border: 3px solid black;
overflow: scroll;
}
.inner {
width: 100%;
height: 100%;
background-color: cyan;
}
<div class="outer">
<div class="middle">
<div class="inner"></div>
</div>
</div>
Related
I'm trying to position a "seeker" in a div element that has other elements in it. I want the seeker to be able to move on top of the content div, without pushing other content around, while also following the scrollbar. The area is resizable so I can't use constant width/height. Like the seeker in a video editor would.
This is what I've gotten so far
#container {
width: 200px;
height:100px;
background-color: gray;
overflow: scroll;
}
#content {
width: 300px;
height: 120px;
}
#box {
width: 40px;
height: 40px;
background-color: green;
}
#seekerContainer {
position: relative;
width: 100%;
height: 100%;
}
#seeker {
width: 4px;
height: 100%;
position: relative;
background-color: blue;
left: 10%;
}
<div id="container">
<div id="content">
<div id="seekerContainer">
<div id="seeker"></div>
</div>
<div id="box"></div>
</div>
</div>
And I've tried different combinations having the seekerContainer and seeker be position absolute/relative, but either the seeker wont follow the scrolling, or it extends the height of the div.
Any pointers to fix this?
I think this is what you are looking for:
.container {
width: 200px;
height: 100px;
background-color: gray;
overflow: scroll;
}
.content {
height: 500px;
position: relative;
}
.box {
width: 40px;
height: 40px;
background-color: green;
}
.seeker {
width: 4px;
height: 100%;
position: absolute;
background-color: blue;
left: 10%;
top: 0;
}
<div class="container">
<div class="content">
<div class="seeker"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
Also, you don't want to put id on every element and use id for styling. You should use classes for that. ID of the element has to be unique for the page so it's not very useful when you need to apply the same styling to more elements.
I am trying to drag-scroll a div containing floated elements. You can play with it here
The intent is that dragging the grey area should drag the pane. I have applied suggestions from similar "expand div to floated content" questions. This is my best effort - vertical overflow looks good but horizontal scroll does not.
added a clear element to the end of the floated elements
added "overflow: hidden;" to parent of floated elements
tried floating the parent div but this didn't seem to fix it
Setting a fixed width works but the content is dynamic.
Code
<div class="title">Tall elements - ok</div>
<div id="wrapper">
<div id="scroller">
<div id="items">
<div class="item-tall">hi</div>
<div class="item-tall">ho</div>
<div class="item-tall">off</div>
<div class="item-tall">...</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="title">Wide elements - not ok</div>
<div id="wrapper2">
<div id="scroller2">
<div id="items2">
<div class="item-wide">hi</div>
<div class="item-wide">ho</div>
<div class="item-wide">off</div>
<div class="item-wide">...</div>
<div class="clear"></div>
</div>
</div>
</div>
$('#wrapper, #scroller').dragscrollable({
dragSelector: '#items',
acceptPropagatedEvent: false
});
$('#wrapper2, #scroller2').dragscrollable({
dragSelector: '#items2',
acceptPropagatedEvent: false
});
#wrapper {
width: 220px;
height: 200px;
overflow: auto;
border: 1px solid #ff0000;
background-color: lightgray;
cursor: all-scroll;
}
#scroller {
height: 100%;
}
#wrapper2 {
width: 220px;
height: 200px;
overflow: auto;
border: 1px solid #ff0000;
background-color: lightgray;
cursor: all-scroll;
}
#scroller2 {
height: 100%;
}
#items {
overflow: hidden;
}
#items2 {
height: 100%;
/* width: 500px; this will fix it */
overflow: hidden;
}
.item-tall {
width: 30px;
height: 500px;
float: left;
background-color: white;
cursor: default;
}
.item-wide {
height: 30px;
min-width: 1000px;
float: left;
background-color: white;
cursor: default;
}
.clear {
clear: both;
}
.title {
padding: 20px;
}
References
Horizontal scroll in a parent div containing floated child divs
Floating elements within a div, floats outside of div. Why?
So, What do you want?
Horizontal scroll bar should not appear in your second item?
For that don't assign width in the second wrapper.You have assigned width:220px;, in the second wrapper but only one child has width:300px ,i.e greater than parent width that's why the horizontal scroll bar is coming.
Don't use width for wrapper2....
#wrapper2 {
height: 200px;
overflow: auto;
border: 1px solid #ff0000;
background-color: lightgray;
cursor: all-scroll;
}
I hope this works.
I'm trying to make a fixed box with 980px width and 500px height scrolling inside a div with 100% width and 1500px height, but it is not working at all.
That's what I did: https://jsfiddle.net/zjuyuhmz/2/embedded/result/
The box is moving when the page scrolls, and I want to make scroll only if the mouse is inside of the div.
Is this possible??
Html:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
Css:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
width: 100%;
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 940px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -480px;
background: black;
}
You need to write javascript code, where you can get cursor position and depending on that enable scroll event.
Replace the css for .test for this:
.test {
width: 940px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -480px;
background: black;
}
.test:focus {
position:fixed;
}
This means: when the element with id "test" has the focus on, make it's position fixed. If not, make it's position absolute.
I want to hide that red marked scrolling element, but scroll bar should be the there !
<div class="parent">
<div class="child">
</div>
</div>
Css
.parent{
position: relative;
width: 300px;
height: 150px;
border: 1px solid black;
overflow: hidden;}
.child{
height: 150px;
width: 318px;
overflow-y: scroll;
}
apply css accordingly
Check it on following link
http://jsfiddle.net/nikkirs/c11khcak/3/
I have a div positioned at the top of the body and another div positioned at the bottom of the body
Now I want to place a div between those two divs and have its height take the max space available between those two divs.
The vertical space between those two divs is not fixed, meaning that when the user decreases/increases the height of the window, I want the middle div to readjust its height accordingly.
More specifically :
<body>
<div style="position: fixed; top: 0px; left: 0px; width: 200px; height: 100%;">
<div style="float: left; height: 50px, width: 200px; background-color: green;"/>
<div style="float: left; height: ???? ; width: 200px; background-color: red;"/>
<div style="float: left; height: 50px, width: 200px; background-color: blue;" />
</div>
</body>
So basically imagine a green rectangular fixed at the top left of the page, a blue one fixed at the bottom left of the page and a red column between them readjusting its height according to the height of the window.
How can I achieve this?
Setting its height at 100% simply makes the middle div expand its height to the bottom of the window which is not what I want. I need it to stop where the blue div starts. Also, making its height e.g. 73% doesn't make it auto-adjust itself correctly when the window height is changed either.
Assuming you are doing this because you want a footer that is flushed to the bottom of the page, then this will achieve a similar effect: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
However solution does not resize the middle div but merely positions the footer over it and then use padding to prevent the contents of the middle div from going onto the footer.
If you want to actually change the size of the middle div, here's the JavaScript for it using jQuery: http://jsfiddle.net/BnJxE/
JavaScript
var minHeight = 30; // Define a minimum height for the middle div
var resizeMiddle = function() {
var h = $('body').height() - $('#header').height() - $('#footer').height();
h = h > minHeight ? h : minHeight;
$('#body').height(h);
}
$(document).ready(resizeMiddle);
$(window).resize(resizeMiddle);
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height: 100%;
}
#header {
background:#ff0;
height: 100px;
}
#body {
background: #aaa;
}
#footer {
height: 60px;
background:#6cf;
}
The correct way of ending <div> tag is by using </div>.
Try this code-
<body>
<div style="position: fixed; top: 0px; left: 0px; width: 200px; height: 100%;">
<div style="float: left; height: 50px; width: 200px; background-color: green; position: fixed;"></div>
<div style="float: left; height: 100%; width: 200px; background-color: red;"></div>
<div style="float: left; bottom: 0px; left:0px; position: fixed; height: 50px; width: 200px; background-color: blue;"></div>
</div>
</body>
HTML:
<body>
<div id="wrapper">
<div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">
content<br/>
content<br/>
</div>
</div>
</body>
CSS:
html, body {
height:100%;
}
#wrapper {
position:relative;
height:100%;
}
#div3 {
background:pink;
bottom:0;
position:absolute;
width:100%;
}
jsfiddle: http://jsfiddle.net/BnJxE/
You can use paddings the same height of your top and bottom elements and set box-sizing to border-box. By setting the height to 100% it will cover the entire height minus the paddings.
JSFiddle with scrollable content
#container {
position: fixed;
top: 0px;
left: 0px;
width: 200px;
height: 100%;
}
#top {
float: left;
height: 50px;
width: 200px;
background-color: green;
position: fixed;
top: 0;
}
#middle {
float: left;
height: 100%;
width: 200px;
background-color: red;
box-sizing: border-box;
padding-bottom: 50px;
padding-top: 50px;
}
#bottom {
float: left;
height: 50px;
width: 200px;
background-color: blue;
position: fixed;
bottom: 0;
}
<body>
<div id="container">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
</body>