in the example below scrolling on wrap doesn't scroll html - and that's what I want
but it works only if you scroll - let's say - 3-4 times
if you continue scrolling - you'll see - the html is scrolling
is there a way to prevent this ?
html{height:200vh; background:lightblue;}
.wrap{
position:fixed;
left:0; top:0; width:50%;
height:100vh;
background:orange;
overflow:auto;
overscroll-bahaviour:content;
}
.ins{
width:50%;
height:150vh;
background:silver;
}
<div class='wrap'>
<div class='ins'></div>
</div>
Related
This is my general wrap:
.wrapper{
width:80%;
height:100%;
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
Inside from this wrap, I have two wrappers more, navigation and entries.
.wrapped-nav{
width:30%;
height:100%;
background-color:#333;
float:left;
padding-top:80px;
text-align:center;
}
.wrapped-ent{
width:70%;
height:100%;
background-color:#666;
float:left;
}
But when my content in the nav section it's outside and the scroll show up in the navigator, my wrap not wraps up my content.
I add this picture from the problem:
Edit: https://jsfiddle.net/qjLthkg2/
Because you're using position:absolute; for the container.
absolute items are taken out of the normal page flow. They are like a ghost and won't expand based on the contents of it, so the inner content just flows down.
You need to rethink your styling.
I am trying to zoom a image which is inside a div.
When page is loaded i am showing 300*300 size image inside a 400*400 size div.
So, to show the image at the center of the div i am using the following css.
#img1{
width:300px;
height:300px;
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
with the above css code i can able to show the image at the center of the div.
but when a user clicks on zoom button i am increasing the height and width of the image. If it becomes 600*600 size image, i have to show scroll bar so the user can scroll the div to show the full image.
For this i set overflow:auto to div.
But the problem is i can't see the full image when i scroll the div. This may be due to the position:absolute property of image. How can i fix this.
I created a fiddler also. There i am showing 2 divs before and after zooming image. Please check.
http://jsfiddle.net/codingsolver/L4qdL/1/
Can you try this;
HTML
<div class="outer">
<div class="inner">
<img id="img1" src="http://siliconangle.com/files/2012/04/HTML5_Wallpaper_1680x1050.png" />
</div>
</div>
<button class="zoomout" data-zoom="out">Zoom Out</button >
<button class="zoomin" data-zoom="in">Zoom In</button >
CSS
.outer{
height:400px;
width:400px;
overflow:auto;
border:1px solid black;
float:left;
margin:30px;
text-align:center;
}
.inner {
height:400px;
width:400px;
display:table-cell;
vertical-align:middle;
}
img {
width:300px;
height:300px;
}
http://jsfiddle.net/L4qdL/7/
I have a question which is asked over a thousand times, I spent whole morning reading simulair question but just cant get mine fixed so hope anyone can help me out.
this is my demo: http://jsfiddle.net/skunheal/4qx6a/1/
#one{
width:100%;
min-height:100%;
background-image:url('http://www.vloerenmantegels.nl/upload/userfiles/Ariostea_Pietre_Black_Ardesia_wi1.jpg');
background-attachment:fixed;
color:#fff;
}
#two{
width:100%;
min-height:100%;
background-color:transparent;
position:relative
}
#content{
min-height:60%;
position: absolute;
bottom:0px;
background:#ff9900;
}
I have 3 divs, all 100% height the first div (div.one) has a picture which is attached fixed The second div (div.two) has an orange textbox div in it(div.container), which is positioned absolute and bottom:0px so it sticks to the footer of div.two. div.two has a transparant background (its white in the fiddle because I cant seem to set it to transparant)
Now when you start scaling the window you see the orange box (div.content) will start expand ing upwards because the text has les space horizantal, but as soon as its the full height of div 2 is just keeps going and starts overlaping div.one, While I want it tp push itself down against div one and make his prant div.two bigger.
How can I fix this because I cant find a way to do this without using javascript.
http://jsfiddle.net/4qx6a/2/
Positioned with relative.
BTW, setting min-height:100% on your container and more than one on the inside is probably not the desired effect, unless you want each one to take up the entire height of the window.
I've made a similar one which you can use. This is working fine if i understood your question correctly.
the HTML
<div id="one"></div>
<div id="two">
<div id="content"></div>
</div>
<div id="three"></div>
the CSS
* {
margin:0;
padding:0;
}
body, html {
height:100%;
}
#one {
width:100%;
height:100%;
background:pink;
}
#two {
position:relative;
width:100%;
height:100%;
background:transparent;
}
#content {
width:100%;
background:grey;
border-top:3px solid black;
position:absolute;
bottom:0;
min-height:60%;
}
#three {
width:100%;
height:100%;
background:green;
}
working Fiddle Link
I am trying to position elements centrally, and in other positions within a fixed, centered box which overlays (when the user scrolls, the overlay-box stays put) my whole mobile site.
I have attached an image diagram to demonstrate what i'm trying to achieve:
Extra details include:
The 'overlay' has a width & height dependent upon the width and height of the users mobile device. i.e, width:80%; height:60%;.
I would like for the image in the top right hand corner of the diagram to always be that way on my site (as far in that corner as possible).
Any help is greatly appreciated. Cheers.
Check out the code. This mostly requires the use of relative and absolute positioning. You can tweak a bit to meet your needs
HTML
<div class="body" style="position:relative">
<div class="box">
<div class="box1"></div>
<div style="clear:both;height:20px"></div>
<div class="child"></div>
<div style="clear:both;height:20px"></div>
<div class="child"></div>
</div>
</div>
CSS
.body{
width:400px;
height:250px;
background-color:#888;
}
.box{
width:80%;
height:150px;
border:1px solid #FFF;
position:relative;
margin:auto;
top:10%;
}
.child {
height:10px;
width:50px;
position:relative;
margin:auto;
background-color:red;
}
.box1{
width:10%;
height:10%;
border:1px solid #FFF;
position:absolute;
top:0;
right:0;
}
I have added the fiddle too. http://jsfiddle.net/nQvEW/176/
I'm sure this has been asked before but I couldn't find it.
Please see http://jsfiddle.net/Bw5j4/1/
I want to make #room div to fit 100% between #top and #commands even if there is no content in it.
And, if the content overlaps (as in current example) I want to fit it within borders of #room with scroll.
I need to keep #commands stuck to the bottom of page. I've tried height, max-height but it didn't work.
This should get you started to lock in the middle section
.room {
background-color:#fff;
border:1px solid #d8d8d8;
overflow:auto;
position:fixed;
top:80px;
bottom:150px;
left:0;
right:0;
}
You'll need to use JavaScript for this, unless the page is guaranteed to always be the same size and can't be resized. If that is the case, you can just explicitly set the height on .room. Otherwise:
function setRoomHeight() {
$(".room").height(
document.documentElement.clientHeight
- $(".top").height()
- $(".commands").height()
- 20);
}
$(setRoomHeight);
$(window).resize(setRoomHeight);
http://jsfiddle.net/gilly3/5TzFm/
(is jQuery ok, or would you prefer a non-jQuery example?)
This is what lazy* developers use tables for. It's very easy to get these fluid layouts like this. Without tables, it's more difficult.
I think perhaps this is something like what you want: http://jsfiddle.net/thomas4g/6u7ry/13/
<div id="wrapper">
<div id="top">Top Stuff</div>
<div id="content">
My Epic Content
</div>
<div id="bottom">Bottom Stuff</div>
</div>
#wrapper
{
height:700px;
background-color:teal;
position:relative;
padding-top:50px;
padding-bottom:50px;
}
#content {
height:700px;
background-color:red;
overflow:auto;
}
#top {
position:absolute;
top:0;
left:0;
height:50px;
width:100%;
background-color:yellow;
}
#bottom {
position:absolute;
bottom:0;
left:0;
height:50px;
width:100%;
background-color:yellow;
}
*granted, just because you use tables doesn't mean you're lazy. It's just often true. No offense intended.