I have one div with overflow: scroll and a lot of text. Then second div inside with position: absolute and 100% height and width. Is it possible to do, when you scroll down, inside div also moves down so it always covers whole visible view of outer div, with only css or I'll need to use javascript?
Here's an example in which you can see, that scrolling down, inside div is left at the top.
CSS:
.test1 {
position: relative;
height: 200px;
width: 500px;
overflow: scroll;
background: green;
}
.test2 {
position: absolute;
opacity: 0.5;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: red;
}
HTML:
<div class="test1">
<div class="test2"></div>
Lot of text
</div>
is this what you want? Demo
.test1 {
position: relative;
height: 200px;
width: 500px;
overflow: scroll;
background: green;
}
.test2 {
position: fixed;
opacity: 0.5;
height: 185px;
width: 485px;
background: red;
}
Related
I've been struggling to hover to work. All this should do is have a red container div and when you hover it, a black inner div drops down from the top to block the container. I must be doing something basic wrong here.
HTML:
<div class="container">
<div class="inner" />
</div>
CSS:
.container {
position: relative;
width: 200px;
height: 200px;
background: red;
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-height: 0;
background: black;
transition: max-height 2s ease-out;
overflow: hidden;
}
.container:hover .inner {
max-height: 200px;
}
As mentioned by Temani Afif, this was nothing more than missing a height.
I have the following markup
<button class="filter"><div class="radio"><div class="circle"></div></div> <span>Account Management</span></button>
and CSS
.filter {
font-size: 3vw;
text-align: left;
line-height: 1.6;
padding: 0px;
display: block;
height:auto;
overflow: hidden;
margin-bottom: 3px;
}
.filter span {
background: $leithyellow;
height: 100%;
overflow:auto;
display: block;
width: calc(100% - 60px);
float: left;
margin-left:10px;
padding-left:20px;
}
I cannot get the span to expand to 100% height of the button. Can this be done?
Heights apply only if the heights are defined properly for the ancestors. If you want the height to work, that's a tricky one. You can use one of my favourites, but you need to make sure it works in all the cases:
Give position: relative; to the parent.
Give position: absolute; to the element that needs full height and width.
Give the element, 0 values for all the sides.
Snippet
.parent {
position: relative;
width: 100px;
height: 50px;
background: red;
}
.parent .child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: skyblue;
}
<div class="parent">
<span class="child"></span>
</div>
In the above snippet, it is noted that this can also work, if you give:
.parent {
position: relative;
width: 100px;
height: 50px;
background: red;
}
.parent .child {
position: absolute;
width: 100%;
height: 100%;
background: skyblue;
}
<div class="parent">
<span class="child"></span>
</div>
One good part about this approach is, you don't need to use the dangerous calc:
.parent {
position: relative;
width: 150px;
height: 50px;
background: red;
}
.parent .child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 60px;
background: skyblue;
}
<div class="parent">
<span class="child"></span>
</div>
Note: On a related note, you can also have a look at this question and answer: Calc() alternative to fixed side bar with content?
Set display: flex to the parent
Set align-self: stretch for the child
This will stretch the height of the child div/button to fit the height of its parent without doing any trick.
By using position: absolute instead of flex-box, it won't be very nice eventually when you have more stuff added or re-arrange later on would be the nightmare.
So I found this question: Can I create a div with a Curved bottom?
Thanks to it I managed to make a curved bottom of an image, using code below:
border-radius: 0 0 50% 50% / 15%;
overflow: hidden;
It looks like that:
(practically). Everything would be nice but... I need the curve to be totally opposite way:
How can I do that with clean CSS?
Try this:
div {
height: 250px;
width: 300px;
background: tomato;
position: relative;
margin:0 auto;
}
div:after {
content: "";
height: 50%;
width: 100%;
position: absolute;
background: white;
border-radius: 50%;
bottom: -25%;
transition: all 0.8s;
}
<div></div>
You can't do it with just one div. Border-radius doesn't work that way. However, you can achieve something like that with multiple elements. Overlay a second div on the first with a curved top, masking part of the upper div. If you like, enclose it all in a container with overflow: hidden; to obscure the bottom part of the overlay div.
<div class="container">
<div class="curved">
</div>
<div class="curved-overlay">
</div>
</div>
<style>
.curved-overlay{
border-radius: 50% 50% 0 0 / 15%;
background-color: white;
width: 100px;
height: 100px;
margin-top: -15%;
}
.curved{
background-color: blue;
width: 100px;
height: 100px;
}
.container{
width: 100px;
height: 100px;
overflow: hidden;
}
</style>
Here's the codepen: http://codepen.io/anon/pen/JKjNPa
In this example an inner green div is covered by a middle blue div, at least in Chrome, despite that it has a higher z-index. Why is it so and how to make it visible over the blue div? The green div must be inside an outer yellow div. From the top:
1. #inner
2. #middle
3. #outer
you could achieve that but you will need to move the #middle div inside #outer for the z-index to work
div {
position: absolute;
}
#outer {
width: 300px;
height: 100px;
top: 20px;
background: yellow;
}
#inner {
width: 240px;
height: 80px;
top: 10px;
left: 30px;
background: green;
z-index: 2;
}
#middle {
width: 280px;
height: 140px;
left: 10px;
z-index: 1;
background: blue;
top: -16px;
}
<div id="outer">
<div id="inner"></div>
<div id="middle"></div>
</div>
This is driving me nuts.
The situation is as follows.
I have 1 wrapper div that needs to span the entire width / height of the screen.
I need 1 div that is positioned on the right hand of the screen and has a fixed width (eg. 100px;).
Then the other div needs to span the remaining left half of the screen (no further !).
Note: I don't want to float the elements, I really need the divs to span the entire height of the screen, because a Google Map will be loaded into the div.
I am aware of the calc function in css, but I don't want to use it, because IE8 doesn't support it.
http://jsfiddle.net/gze4vcd2/
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
#wrapper{
position: relative;
width: 100%;
height: 100%;
background: greenyellow;
}
#left{
position: absolute;
left: 0;
width: auto;
background: blue;
}
#right{
position: absolute;
right: 0;
height: 100%;
width: 200px;
background: yellow;
}
This doesn't work at all.
I have tried all sorts of things, but I just can't get it to work.
Have you tried to use position: fixed for your #Wrapper
#wrapper{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: greenyellow;
}
#left{
background: red;
position: fixed;
left: 0;
top: 0;
height: 100%;
right: 100px;
}
#right{
background: blue;
position: fixed;
width: 100px;
top: 0;
height: 100%;
right: 0px;
bottom: 0px
}
Above is the updated code that works for me