With HTML below, why is horizontal scroll bar visible and vertical isn't?
This is true for Chrome, Firefox and Safari, but not for Edge where both scroll bars aren't visible.
To me, it will be logical that both scroll bars aren't visible as it is in Edge browser.
<div style="position: absolute; width: 300px; height: 300px; border: 1px solid black; overflow: auto;">
<div style="transform: translate(150px, 150px);">
<div style="position: absolute; left: -25px; top: -25px; width: 50px; height: 50px; background: blue;"/>
</div>
</div>
The second div has height 0 because its only inner element is a div with position: absolute. By default, div elements have width 100% and height to be the minimum to comport all inner elements, but elements with position absolute or fixed don't need to be comported inside their parent container, so they don't contribute with their container's height.
If you want the vertical scrollbar to show up, you can either force the second div's height to something greater than 300px or add more child elements with other types of position.
Related
i have some problem which i can't figure out.
so
i have a div with background image.
<div class="a"></div>
and i want to make clickable some point of this background image. It's okey i can make this with adding to some div width z-index and make it clickable and positioning this with position:absolute e.g,
<div class="b">
<a class="clickablePoint" href="#"></a>
</div>
but how i can keep this clickable point on the same way when i resize the window if my background-image must be a responsive so background-size:100% auto.
maybe have some method to calculate background image height realtime when resize window ? or any other method? :(
Here's a minimal viable solution showing how to absolutely-position an element based on a full-width (background-size: 100% auto) background.
I'm setting the font-size of the element to 1vw (1/100th of the width of the viewport) and then calculating its left/top position and width/height size in em units, which become equivalent to a multiple of that 1vw.
As such, resizing this demo to any size will keep the box in the same place around the cat's nose.
body {
background: url('https://i.imgur.com/sVz3YRx.jpg');
background-size: 100% auto;
height: 50vw; /* for stack snippet height */
position: relative;
margin: 0;
}
.nose {
border: 1px solid yellow; /* for demo */
position: absolute;
font-size: 1vw;
top: 27em;
left: 59em;
width: 6em;
height: 5em;
}
<a class="nose"></a>
Let's say I have a site with a central div, approximately 50% of the width of the window, with other divs either side of it filling up the remaining space. The spanning divs are fixed, and don't move, nor can they scroll.
At the moment, when my mouse is over one of the spanning divs, I (naturally) can't scroll the central div. My question is this: is there a way to ALWAYS have scroll focus on a particular div, no matter where the mouse is located on the page?
EDIT: What I actually have is this:
<div id='wrapper'>
<nav id='sidebar'></nav>
<div id='rhs'></div>
</div>
where wrapper and sidebar both have position fixed, and sidebar and rhs are adjacent in the center of wrapper (i.e. margin: 0 auto; to sit them in the middle). Scrolling with my mouse over either wrapper or sidebar does not scroll rhs, despite the positions being fixed (so Toni Leigh's answer doesn't work for me here).
Yes, you can do this using position: fixed;
The two outer divs are fixed to the screen regardless of scroll position. The the central div scrolls regardless of where the mouse pointer is. You use top and bottom to fix the full height of the screen, then left and right to fix each on either side.
You can still interact with content in the fixed outer divs.
Please see this example
Something like this? Demo
You set the two side divs to be have a position: fixed property and by using top: 0, left: 0 and right: 0 you can move these into position to the top left and top right respectively.
Then you can have a regular element in the middle. The scroll will now always affect the non-fixed element. (I added a background picture so you can see they don't scroll).
HTML
<div class="fixed left"></div>
<div class="center"></div>
<div class="fixed right"></div>
CSS
.fixed {
width: 25%;
height: 100%;
background-image: url('http://www.6wind.com/blog/wp-content/uploads/2014/04/Vertical-White-car-Banner.jpg');
position: fixed;
top: 0;
}
.left {
left: 0;
}
.right {
right: 0;
}
.center {
position: relative;
margin: 0 auto;
width: 50%;
height: 5000px;
background: red;
line-height: 0;
}
I'm pretty fresh to web development and cannot figure this one out. Appreciate any help!
On re-size the fixed div moves out of the container instead of re-sizing. The site I'm working on has the nav as the fixed section and is inside of the main container.
Any help is appreciated. Thanks!
<div class="container">
<div class="fixed"></div>
</div>
.container {
border: 1px solid;
max-width: 600px;
width: 100%;
min-height: 1600px;
}
.fixed {
max-width: 600px;
width: 100%;
height: 50px;
border: 1px solid green;
position: fixed;
}
http://jsfiddle.net/KqvQr/
When you specify position as fixed the Element, even thought it is inside a parent container, It won't behave as a child of a parent container. It won't adjust his width according to the parent width. But I can give you a solution where when user resize the page the fixed element also get resize yet it is a position fixed
.fixed {
height: 50px;
border: 1px solid green;
position: fixed;
right:0;
left:0;
}
Don't specify widths for the container. instead of that specify left and right values. so then when page is resizing css only check for the left and right margin values. by keeping those values it will adjust its inner width always.
Here is the working fiddle http://jsfiddle.net/KqvQr/5/
I don't think you can achieve what you want if you stick with that constraints. Your width and max-width will work as expected if you change your position to relative instead of fixed..
Check out this Fiddle
I have a search website that needs to have the search bar and logo centered vertically and horizontally in the index page as its the only items on the page.
What is the best and most effective way to implementing this
here's an easy way to do it, though it won't work in IE6, which doesn't support position:fixed. If you want IE6 support, use position:absolute, but ensure the page content isn't longer than the height of the viewport.
#box {
position: fixed;
left: 0;
top: 0;
width:100%;
height: 100%;
}
#box table {
height: 100%;
}
#box td {
vertical-align: middle;
text-align: center;
}
and the HTML:
<div id="box"><table><tr><td>
YOUR HTML CODE HERE
</td></tr></table></div>
THAT SAID...
You probably shouldn't do this though. You'd be better off simply adding 50-100 pixels of padding at the top if you're simply going for a look that avoids having your content hard up against the top of the page.
for css-only approach check out this fiddle. http://jsfiddle.net/jeffrod/nFthS/
it requires that the width and height of the center box be known. it positions the top left of the box in the middle and then, using margins, shifts it back so that the center of the box is at the center of the page.
<style>
div.center {
position: fixed;
width: 320px;
height: 240px;
top: 50%;
left: 50%;
margin-top: -120px;
margin-left: -160px;
}
</style>
<div class="center"><!-- search bar --></div>
but I don't know if this is the best way
I need to build a dynamically-resizing scrolling div.
The div should dynamically resize to fit the screen. But if the content doesn't fit on the screen, it should display a scrollbar. So the browser's own scrollbar should never need to become active.
I can get a scrollbar to appear in the div by placing another div inside it and using overflow: auto.
<div id="gridcontainer" style="overflow:auto;height:300px; width:100px;" >
<div id="gridcontent" style="height:100%">
<!--Put loads of text in here-->
</div>
</div>
The trouble is that this only works when the first div has a fixed height. I had hoped I could just set the first div to height:100%, but sadly not- this property appears to get ignored, and the scrollbar just doesn't appear.
I have tried putting the divs in a table with height:100%, and setting the first div to height:auto, hoping it might take its height from its parent. But the div still seems to ignore the height property.
So my question is: Can this be done using just html, or- failing that- javascript?
You could stretch the div using absolute positioning. This way it will always take the size of the browser window (or the closest positioned ancestor).
Given this HTML:
<div id="gridcontainer"></div>
the CSS should be something like:
#gridcontainer {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
overflow: auto;
}
Live Demo
Since IE9 you can use viewport units.
Let's say that the height of your container is dynamic, unless its size is greater than the window height. In that case we stop the expansion & activate the scroll.
#container{
background: #eaeaea;
max-height: 100vh;
overflow-y: scroll;
}
div{
outline: 1px solid orange;
width: 200px;
height: 200px;
}
<div id='container'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
If you are trying to make element fit the screen then you can set the value of hight and width of the element to 100%.
You will also need to set the height of html and body
html, body {height: 100%}
#gridcontaine {
height: 100%;
width: 100%;
}