I have an underlay and a registration div inside it. The inner div content is dynamic based on registration step.If the content expands in height it becomes scrollable. The problem is that the scroll only works if the mouse is focused/hovered on inner-div. I want it to be able to scroll even if I have my mouse outside inner div (hovered on underlay). Is that possible? and how?
.underlay {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: #eaeaea;
}
.inner-div{
position: relative;
z-index: 3;
}
Problem was in the html code:
<div class="registration">
... content
</div>
<div class="underlay"></div>
Solution was an simple embedment:
<div class="underlay">
<div class="registration">
... content
</div>
</div>
Related
How to make sidebar sticky on page scroll?
<div class="header">This is header</div>
<div class="row category-page">
<div class="category-filter col-2">Filter</div>
<div class="category-content col-10">ontent</div>
</div>
<div class="footer">This is footer</div>
I tried to do it with the position:sticky, but the result is not the same:
When the page is scrolled, only the content is scrolled. And when you scroll to the end of the content, the sidebar itself is already scrolling.
.category-filter {
position: sticky;
height: 100%;
top: 0;
}
The following is needed - when the page is scrolled, both the sidebar and the content should be scrolled. And which element ends first, that one should stick to the visible part of the screen.
Preferably in css, since I don't know how to work with js yet.
I really hope that I explained it clearly =))
Sticky position generally works fine in CSS, but it does not in one case: it looks up the node tree (HTML document) and if it sees any overflow: hidden in parent elements, it does not work.
See this codepen when it works.
Example
However, the same example does not work with overflow: hidden:
<div class="container">
<div class="box"></div>
<div class="box2"></div>
</div>
// CSS
.container {
height: 300vh;
width: 100vw;
background-color: aqua;
**overflow: hidden;**
padding: 20rem;
}
.box {
height: 20rem;
width: 5rem;
background-color: orange;
position: sticky;
top: 0;
}
I'm trying to make a navbar that has a fixed position and has elements inside of it that are also fixed:
.navbar {
position: fixed;
top: 0;
bottom: 0;
right: 0;
}
.content-area {
overflow: scroll;
}
.top-area {
height: 100px;
position: fixed;
top: 0;
}
I have two areas that should be fixed to the top and the bottom and a content area in the middle that's overflow scrolls under the bottom area. When I add position: fixed; to .top-area or .bottom-area they disappear to the top. Why can't I fix an element onto the navbar?
The html looks like this:
<div class="navbar">
<div class="top-area">
</div>
<div class="content-area">
<p> Content here </p>
</div>
<div class="bottom-area">
</div>
</div>
Fixed Elements are taken out of the normal flow of html page. Try to set the z-index value to these classes. Give higher e.g. z-index: 100 to those which you want to be on the top.
If you could show your html, I could fix it more precisely for you :).
I have this simple navigation bar and an image view underneath. I want the image view's height to be as heigh as the amount of space left without scrolling. If you get what I mean? I thought I could just set the height as 80% or something but nothing changes.
Structure:
<div id="page">
<div id="navigation"></div>
<div id="content-container">here's my image view</div>
</div>
I want the content-container's height to be what's left of the page. If I set my page 's height to 50% nothing changes either..
This is the website
Edit: found it:
body, html{position:absolute; height:100%;}
#page{position:relative; height:100%;}
#content-container{height:89%;}
try this
#navigation {
position: relative;
z-index: 10;
}
#content-container {
overflow:hidden;
position: absolute;
top: 70px; /* #navigation's height */
left: 0;
right: 0;
bottom: 0;
}
I have this code:
HTML:
<body>
<div id="menu">
menu elements...
</div>
<div id="main">
Main website content...
</div>
</body>
CSS:
body{background-color:CCCCFF;}
div#menu{background-color:#000000;display:table;height:45px;}
div#main{background-color:#FFFFFF;border-radius:10px;margin:10px;}
The menu div is a horizontal menu bar.
I want the main div fill the whole page (except the menu). Also when it is needed it should fill more space (example: if it has a lot of content). I don't want to use any javascript or the calc() method of CSS.
Is it possible to do what I want?
Thank you for your time!
Yes, you can add to your CSS:
html, body {
height: 100%;
}
and than your div will correctly use height attribute with %. You can add bottom, left, right, top attributes:
div#main {
position: absolute;
overflow: auto;
bottom: 5px;
top: 50px;
left: 5px;
right: 5px;
}
check margins and paddings.
If you can use javascript, that's may be interesting to use
height: auto;
max-height: 300px; /*calculated value on resize and load*/
Before you read further, I am utilizing the OneByOne Jquery Slider plugin, the plugin content is what I am attempting to snap to the top of its container div. To read more about OneByOne, here is a link: http://codecanyon.net/item/jquery-onebyone-slider-plugin/684613
I am attempting to snap an inside div to the top of its container div, here is my (what I think is anyway), the related CSS:
#banner{
position: absolute;
}
.oneByOne1{
margin-right: auto;
margin-left: auto;
width: 960px;
height: 420px;
position: relative;
overflow: hidden;
}
#banner .oneByOne_item{
position: absolute;
width: 960px;
height: 420px;
overflow: hidden;
display: none;
}
The div I am attempting to snap to the top is the "banner" div, and the container div is "content", but with the OneByOne plugin, it's recognized as the oneByOne div block coded above, here is my relevant HTML:
<div id="content">
<div id="banner">
<div class="oneByOne_item">
<img src="img/storefront.jpg" class="item_1_1" />
</div>
<div class="oneByOne_item">
<img src="img/livemusic.jpg" class="item_1_2" />
</div>
<div class="oneByOne_item">
<img src="img/brokerecord.jpg" class="item_1_3" />
</div>
</div>
</div>
Here is a link to my current site: http://raider.grcc.edu/~ryanduffing/recordstore/
<div class="search_line"> has position:relative and top: -100px. The image inside has a height of 61px, so the div around it does too.
Because you have it positioned relatively, it is still taking up space in the DOM where it naturally would appear, but your top value is "pulling" it up to where it appears visually. Because it's still taking up space in the DOM, it's pushing your #content down the 61px.
I can't see a good reason to leave it how you've done it, so if you can alter it without breaking anything else, I'd recommend changing it to
.main_header .search_line {
position: absolute;
top: 39px;
right: 0;
}