Imagine an HTML page like the following one:
<body>
<div class="main">
<div class="free">aaa</div>
</div>
</body>
The free div is absolutely positioned, and its position is outside the visible area of the browser. Because of that, it will generate an overflow, and scrollbars will be shown. This is ok.
The main div, instead, should be as big as the full area inside the browser. It shouldn't be limited to the visible area.
html, body {
height: 100%
}
.main {
background-color: gray;
width: 100%;
height: 100%;
}
.free {
position: absolute;
width: 100px;
height: 100px;
left: 3000px;
top: 3000px;
}
As you can see here, http://jsfiddle.net/y79NS/12/, the gray div doesn't extend in the "overflow zone". It works if I add a static width/height to html and body elements, but I don't know in advance how much it should be big.
Is there a pure CSS solution? If not, what's the best way to do it with Javascript, keeping in mind that the user could resize the browser in any moment?
You are just missing a semi-colon in your CSS, also use negative margins if you want to hide .free:
html, body {
height: 100%;
}
body {
position: relative;
}
.main {
background-color: gray;
height: 100%;
width: 100%;
}
.free {
position: absolute;
width: 100px;
height: 100px;
left: -3000px;
top: -3000px;
}
http://jsfiddle.net/btipling/y79NS/17/
Related
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 3 years ago.
I will try to make my question more clear.
Because I used below setting on Html body, I need to scroll the page down to get to page bottom.
body { height: 180vh;}
And I want to set a div position top property relative to document height, so that I can control its position at a place only visible when I scroll down. I prefer to set it by percentage value so that code will adapt different sizes of devices.
But by default the top property is relative to viewport, so I can not realize it by setting top value.
Is there a way to realize what I want to do? even not by top property.
If you give the body a position: relative and the div a position: absolute, you can set the top property as a percentage, where top: 100% will position it at the bottom of the page:
body {
height: 180vh;
background: lightblue;
position: relative;
}
div{
height: 30px;
width: 140px;
border: solid 2px gray;
background: white;
position: absolute;
top: 100%;
}
<div></div>
If i understand your question correctly, there are 2 ways
use padding-top
use position:absolute and top
code snippet below:
body {
height: 180vh;
}
.myDiv1 {
margin-top: 110vh;
height: 100px;
width: 100%;
background: lightblue;
}
.myDiv2 {
position: absolute;
top: 150vh;
height: 100px;
width: 98%;
background: lightpink;
}
<body>
<div class='myDiv1'></div>
<div class='myDiv2'></div>
</body>
First you need to make sure that the position property of the body is relative, absolute or fixed.
You can then set the position: absolute to make the element be dependent on the last parent element that had one of three properties mentioned above.
Finally you can set your top, left, right and bottom properties after that.
body {
height: 180vh;
position: relative;
}
#down {
position: absolute;
// or bottom: 10%;
bottom: 25px;
}
<div id="down">Here</div>
I'm having a bit of a problem with this design. The page is supposed to start with an image that is focused in the middle of the viewport, then you scroll down below the fold to see more content. I have it working with the code below but there's one issue. The scrollbar throws the viewport image off center. Does anyone know how to fix this? keep in mind, I still want the scrollbar there.
I don't know if this is possible. But could I use jquery to subtract the scrollbar width from the site only if scrollbar is active? I don't really know how to use jquery though. And I feel that if I subtract scrollbar width from 100vw then the site will look off on mobile when there is no scrollbar.
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
overflow-x:hidden;
}
#abovefoldcontainer {
background-color: red;
width: 100vw;
height: 100vh;
}
#abovefoldimage {
background-color: #6FF;
position: relative;
left: 150px;
top: 150px;
width: calc(100vw - 300px);
height: calc(100vh - 300px);
}
#belowfold {
}
<html>
<body>
<div id="abovefoldcontainer">
<div id="abovefoldimage">Content goes here</div>
</div>
<div id="belowfold">
Content goes here too<br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
I am working on a form that has multiple pages that I would like to scroll in/out of view. I have to use absolute positioning to force the divs (pages) to scroll in a single line; however, this causes the parent divs height to not be responsive to the children (which have varying heights based on amount of content plus dynamic content being added to them).
How can I make the parents height be responsive to the children while still allowing my pages to scroll in a single line (I have already tried float)?
Is there anyway to achieve the same effect as the jsFiddle Demo without having to use absolute positioning?
Example: jsFiddle Demo <--- How do I make the toggle button remain below the divs no matter how tall they are?
#div1{
width: 500px;
height: 110px;
background-color: blue;
position: absolute;
top: 0px;
left: 0px;
}
#div2{
width: 500px;
height: 110px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
}
.container {
width: 800px;
position: relative;
height: 100px;
}
<p>some content here </p>
<div class="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
<button>Toggle</button>
EDIT
Updated jsFiddle to show problem better.
You inspect the height and position of the child elements and calculate the total height and apply that to the parent. Absolutely-positioned elements have their own layout context, so CSS alone cannot solve this.
The height in #div1 and #div2 is causing an overflow of the .container div:
Set the height of #div1 and #div2 to the same height as its container:
#div1{
width: 500px;
height: 100px;
background-color: blue;
position: absolute;
top: 0px;
left: 0px;
}
#div2{
width: 500px;
height: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
}
Or set the .container to overflow:hidden:
.container {
width: 800px;
position: relative;
overflow:hidden
height: 100px;
}
Updated jsfiddle:
http://jsfiddle.net/FkNa2/193/
Depending on what you want, i Updated your fiddle:
Button position is fixed at document loading, based on height of the biggest absolute element:
$(function(){
$('#container').height(Math.max($('#div1').height(),$('#div2').height()));
});
you can see the fiddle here
Button position is recomputed each time the toggle is done, you can use the complete option of one of your toggle to handle it:
$div2.toggle('slide', {
direction: 'left',
complete:function(){
$('#container').height($('#'+currentDiv).height());
}
}, 'slow');
see the fiddle here
use min-height for #div2
#div2{
width: 500px;
min-height: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
}
I want to add <div>some content</div> dynamically to a container BUT I want this container to have fixed height and width, i.e., the added divs should scale themselves to fit in the container (thus also avoiding scroll bar in the container).
Setting the height of the container to 100% doesn't seem to work, since it scales to accomodade the div's.
It's more or less what jsfiddle.net does with those four iframes (e.g. try adjusting your window size).
Is there a way of accomplishing this by CSS?
example code
<div class="container">
<div class="added"> Some content </div>
<div class="added"> Some content </div>
</div>
style
#container { height: 100%; width: 100% }
.added { min-height: 200px; min-width: 200px; }
Try setting your overflow to hidden:
#container { height: 100%; width: 100%; overflow: hidden; }
jsfiddle.net uses iframes you can use overflow:scroll in #container, but #container { height: 100%; width: 100% } will depend of it parent element, so you can make:
#container { height: 500px; width: 200px; overflow:scroll }
why not reverse it? you say you want the container to have fixed height and width, but then you make it to have dynamic height and width.
#container { height: 500px; width: 500px } // or whatever
.added { height: 50%; width: 50%; }
try this:
#container { height: 500px; width: 200px; position: relative; overflow: hidden }
.added { position: absolute; width: 100%; height: 100%; }
I'm using videobox to embed streams into my site, and I just discovered that when videobox is "on"- i.e. I clicked on a link that brings it up and dims everything around it- I can still scroll down and see the rest of my (non-dimmed) site. This breaks immersion, and I'd like to disable the scrolling, but only for when the videobox is on.
I have no idea where to start though.
You can't do this just with JavaScript, as far as I know, as the onscroll event is not cancelable.
You can achieve this by positioning everything in a container div with a height and width of 100% and disabling overflow on html and body elements, so you actually get the scrollbars on the container div. When your videobox is on, you can turn on an overlay that hides everything behind it (including the scrollbars on the container) and display the videobox on top of it.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Prevent scrolling</title>
<style>
* { padding: 0; margin: 0; border: 0 }
html, body {
height: 100%;
overflow: hidden;
}
#container {
position: absolute;
height: 100%;
width: 100%;
overflow: auto;
}
#large-div {
background: #aaa;
height: 5000px;
width: 5000px;
}
#overlay {
position: absolute;
background: #fff;
opacity: 0.7;
-moz-opacity: 0.7;
-webkit-opacity: 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
height: 100%;
width: 100%;
z-index: 1000;
display: none;
}
#videobox-container {
position: absolute;
background: #dd8;
width: 600px;
height: 400px;
top: 50%;
left: 50%;
margin: -300px 0 0 -200px;
z-index: 1001;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="large-div"></div>
</div>
<div id="overlay"></div>
<div id="videobox-container"></div>
<script>
function showVideoBox() {
// show both overlay and videobox-container
document.getElementById("overlay").style.display = "block";
document.getElementById("videobox-container").style.display = "block";
}
showVideoBox();
</script>
</body>
</html>
(You'll have to fiddle a bit with the positions of your elements, but you get the idea.)
The easy solution is to add the css body{overflow:hidden;} when the video starts playing and after that remove it. Also, can you not put the video box in a div tag and set its position to fixed?
in videobox.js
replace line 80
this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'});
with this:
this.overlay.setStyles({top:-$(window).getScroll().y,height:$(window).getScrollSize().y+$(window).getScroll().y});
Essentially this gets the height of the 'y' scroll and rather than just what the screen is showing.