When position is positive, scrollbar work just fine. but when left is negative, scrollbar won't apear. how can i have scrollbar when element is on the left side or on the right side?
sample is here:
.container{
position: relative;
width: 350px;
height: 250px;
background: gray;
overflow: scroll;
margin: 10px auto;
}
.child {
position: absolute;
top : 200px;
left: -50px;
width: 150px;
height: 150px;
background: white;
border: 1px solid blue;
}
<div class="container">
<div class="child"></div>
</div>
It seems like you cannot do that, because the browsers do not provide that feature.
This is my understanding after looking at the WebDriver spec
http://w3c.github.io/webdriver/webdriver-spec.html
In the section titled 'Determining if an element is displayed'
there is a point that says
"The User Agent must not allow negative scrolling"
Related
I was wondering how I could make a div that I have fixed to the bottom right of my screen become unfixed once the page reaches the footer.
For example if my html is:
<div class="main" />
<div class="fixed" />
<div class="footer" />
And my css is:
.main {
height: 100vh;
background-color: aqua;
width: 100vw;
}
.fixed {
background-color: green;
height: 200px;
position: fixed;
bottom: 0px;
width: 200px;
}
.footer {
background-color: brown;
height: 300px;
width: 100vw;
}
I would like to have my fixed div in the bottom until the footer starts to be revealed and then have it scroll on top of the footer. Should I use sticky positioning? If so how do I do that? If not is there a better solution?
Thanks.
You can use position: sticky along with bottom: 0 to stick it to the bottom of the viewport (to answer your question of how). Since it's non-sticky location is right before the footer, it will rest naturally when the viewport reaches there.
body {
font-weight: bold;
font-size: 24px;
padding-bottom: 300px;
}
main * {
padding: 10px;
background-color: #ccc;
border: 1px solid #000;
}
.content {
min-height: 1000px;
}
.sticky {
position: sticky;
/* the important part - stick to the bottom */
bottom: 0;
border: 1px solid red;
background-color: white;
}
<main>
<div class="content">content</div>
<div class="sticky">I'm sticky</div>
<footer>footer</footer>
</main>
That being said, as mentioned in the comment by Will - should you use it? That depends on what browsers you support. If you need to support older browsers, you'll need a fallback and/or JavaScript to handle the positioning.
Recently I have come across a problem for which I am not finding any appropriate solution.
Below is the image which gives an idea of what i am trying to achieve:
The div shown by the arrow is the mark of the problem which i am finding a solution for.
The problem is I want the div to be extended to full screen.
This div is inside a parent div who has a fixed width due to which i am not able to extend my image to full screen.
Have tried giving overflow to parent but isn't working.
I have tried below solution which is working to a certain extent but need a reliable solution.
width: 100%;
left: 0;
position: absolute;
margin-left: calc(-31.5vw);
align-content: center;
Could someone please provide some solution to this?
html, body
{width: 100%; height: 100%; overflow: hidden;}
#parent{
display: block;
background-color: yellow;
border: 1px solid red;
position: fixed;
width: 200px;
height:100%;
}
#child1{
background-color: red;
display: block;
border: 1px solid yellow;
position: absolute;
width: 100vw;
margin-left: calc(200px - 100%);
//top:0px
}
<div id="parent">parent with position: fixed
<div id="child1">child wrapper (uncomment top to fit the parent wrapper)</div>
</div>
use Viewport Sizes so it will cover the whole page (vw and vh)
#first {
width: 100px;
height: 100px;
background:gray;
position: fixed;
top: 0;
left: 0;
}
#second{
width: 100vw;
height: 100vh;
background:blue;
position:absolute;
}
<div id="first">
<div id="second">
something
</div>
</div>
The below code snippet should work, if I understand your question correctly. Setting the width of the child div to 100vw makes the div 100% of the width of the viewport (window).
Also note that in order to get the child to start at the left of the viewport and not the left of the parent, I gave the child a position of absolute and a left of 0. Because the parent is not positioned, it starts the left of the child at the left of the viewport (the closest positioned ancestor).
#parentDiv {
width: 250px;
height: 250px;
margin: 0 auto;
background-color: orange;
border: 2px solid red;
}
#childDiv {
/* 100vw is 100% of the viewport width. */
width: 100vw;
height: 50px;
background-color: lightblue;
box-sizing: border-box;
border: 2px solid green;
position: absolute;
left: 0;
}
p {
text-align: center;
}
<html>
<body>
<div id="parentDiv">
<p>Parent</p>
<div id="childDiv"><p>Child</p></div>
</div>
</body>
</html>
I'm trying to setup a frame-like area using div, so all the content and picture in the area won't display beyond the area. However, I've tried using different z-index or display but no luck.
http://jsfiddle.net/06xwge5j/
HTML
<div id="Parent">
<div id="Child">
test content
</div>
</div>
CSS:
#Parent {
width: 50px;
height: 50px;
border-width: 1px;
border-style: solid;
}
#Child {
position: relative;
top: 30px;
left: 30px;
width: 50px;
height: 50px;
background: black;
z-index: -1;
}
You need to utilize the CSS overflow property on the parent element. Add the following line to the #Parent rules:
overflow: hidden;
This will completely hide child elements that are outside the box. Most likely you want to use auto instead of hidden to show scrollbars only when the content exceeds the box. jsFiddle
Demo
#Parent {
width: 50px;
height: 50px;
border-width: 1px;
border-style: solid;
overflow: hidden;
}
#Child {
position: relative;
top: 30px;
left: 30px;
width: 50px;
height: 50px;
background: black;
}
<div id="Parent">
<div id="Child">
test content
</div>
</div>
http://jsfiddle.net/06xwge5j/1/
Take a look
overflow: hidden;
it hides all content of an element that go beyond its edges.
I am aware about the concept of 'margin-collapse'. But , why am I not able to see 10 px margin on the top of the first box here. The top box(which has the id 'first') should have 10px margin above it. If this is not the correct wat to get it, then what is it? And, why this doesn't work.
CSS:
#Main{
background-color: gray;
position: relative;
width: 200px;
height: 300px;
}
.box{
position:relative;
height: 60px;
width: 175px;
background: black;
margin: 10px 10px 10px 10px;
}
HTML:
<div id="Main">
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>
</div>
I know one way could be that we can give 10px padding to the parent div. But then why doesn't this thing work?
The margin: 10px 10px 10px 10px in your code moves the "Main" box as well.
If you want to move the box with id "first" only, use position:relative; top: 10px;
jsfiddle demo
edit: I don't know to say for sure why this happens but my guess is it is because the display of the "Main" box is block by default.
When you use display: inline-block; on the "Main" box, the problem is fixed. (jsfiddle)
This is how browsers interperit the code. It does not output the expected result which would be a 10px gap between the top of the child and the outter parent. You could add padding-top to the parent, alternatively you could assign overflow:auto; to your main div.
DEMO http://jsfiddle.net/kevinPHPkevin/2f4Kz/4/
#Main {
background-color: gray;
position: relative;
width: 200px;
height: 300px;
overflow:auto;
}
Another way around this is to add a transparent border around the main div (stops margin collapsing)
#Main {
background-color: gray;
position: relative;
width: 200px;
height: 300px;
border: thin solid transparent;
}
The third a final option (to my knowledge) is to stop the margin collapsing by setting padding-top: 1px; margin-top: -1px; to the parent div
#Main {
background-color: gray;
position: relative;
width: 200px;
height: 300px;
padding-top: 1px;
margin-top: -1px;
}
If you'll take a look at my site http://www.metroflatsmiami.com/listing.html, you'll see that I have a floating DIV on the right, but the thing is it's set off the left side. If you resize your window (or have a different resolution), it won't look right. I want it to always be just to the right of the main content DIV, but still scrolling... any thoughts?
The CSS:
.floating_price_box {
position:fixed;
width: 200px;
border: solid 1px black;
height: 400px;
top: 50px;
left: 1000px;
}
Use jQuery:
$(window).bind("load resize", function(){
$('.right-block').width($('.main-block').width() - (25));
});
Yeah....why not do right: 50px instead of left: 1000px?
If you set the floating_price_box div to have a left value of 75%, it will scale with the page size. It breaks when the browser window gets too small, but the window has to be pretty small for that.
.floating_price_box {
position:fixed;
width: 200px;
border: solid 1px black;
height: 400px;
top: 50px;
left: 75%;
}
In order to make the sidebar 25px to the right of the main content, you could also do something like this. Add an inner div to your floating price box:
<div id='home_search_container'>
...content...
</div>
<div class="floating_price_box">
<div class="floating_price_box_inner">
Nightly Rate: $90 - $130 (Instant Quote)<br/>
</div>
</div>
And here's your CSS:
#main {
float: left;
margin-right: 25px;
width: 700px;
}
.floating_price_box {
float: left;
width: 200px;
}
floating_price_box_inner {
border: solid 1px black;
height: 400px;
position: fixed;
top: 50px;
}
Basically all this second method does is float the outside boxes to the correct position. Then the inner div is styled to fix the box vertically where you want it.
The simplest way is to position it like the main content and then use margin to shift it to the side:
.floating_price_box {
position:fixed;
width: 200px;
border: solid 1px black;
height: 400px;
top: 50px;
/*left: 1000px;*/
margin-left : 700px; /* main column width */
}