Is it possible to specify the max-height of a DIV with position:absolute such that if it would reach past the viewport downwards, a scrollbar appears?
I.e., to user "overflow-y: scroll;" without having to specify the height statically? (Such that it works even if you resize the window.)
Here's what I mean: https://jsfiddle.net/x5efqtv2/2/
(And also see below)
P.S.: I could solve it with JavaScript, I'm interested in pure CSS solutions, if there's any.
Thanks!
div {
border: 1px solid red; /* just to see where the DIVs exactly are */
margin: 5px; /* ditto */
}
.float-over-content {
position: absolute;
max-height: 100px;
overflow-y: scroll; /* works with static max-height only? */
z-index: 10;
background-color: white;
}
<body>
<div id="upper">This one is above the position:absolute one</div>
<div style="position: relative">
<!-- this is needed for position:absolute below to put the div under "upper" -- or so I think -->
<div class="float-over-content">
<!-- I WANT TO DEFINE THE MAX-HEIGHT OF THIS DIV SUCH THAT IF IT REACHES THE BOTTOM OF THE VIEWPORT, A SCROLL BAR SHOULD APPEAR: (AS OPPOSED TO NOW, WHEN ITS HEIGHT REACHES 100px) -->
Make this reach exactly to the bottom<br/>
<!-- X times... -->
Make this reach exactly to the bottom<br/>
</div>
</div>
<div id="lower">
This one is "behind" the position:absolute one (it partially covers this one)
</div>
</body>
What Temani said in the comment. Use the calc function and the view height (vh) of the viewport. Check out the code snippet below. I added a button that will add more lines of text to the element and you can see it expand to fit the viewport with the overflow becoming scroll content.
document.getElementById("add-a-line").addEventListener("click", function(){
document.getElementById("float-over-content").insertAdjacentHTML('afterbegin','Make this reach exactly to the bottom<br/>' );
});
div {
border: 1px solid red; /* just to see where the DIVs exactly are */
margin: 5px; /* ditto */
}
#float-over-content {
position: absolute;
max-height: calc(100vh - 47.4px);
overflow-y: scroll; /* works with static max-height only? */
z-index: 10;
background-color: white;
}
#add-a-line{
position:fixed;
right: 0;
width: 200px;
height: 20px;
background-color: #0f0;
}
<body>
<div id="upper">This one is above the position:absolute one</div>
<div style="position: relative">
<!-- this is needed for position:absolute below to put the div under "upper" -- or so I think -->
<div id="float-over-content">
<!-- I WANT TO DEFINE THE MAX-HEIGHT OF THIS DIV SUCH THAT IF IT REACHES THE BOTTOM OF THE VIEWPORT, A SCROLL BAR SHOULD APPEAR: (AS OPPOSED TO NOW, WHEN ITS HEIGHT REACHES 100px) -->
Make this reach exactly to the bottom<br/>
<!-- X times... -->
Make this reach exactly to the bottom<br/>
</div>
</div>
<div id="lower">
This one is "behind" the position:absolute one (it partially covers this one)
</div>
<div id="add-a-line">
Click to add a line
</div>
</body>
Related
Say I have three divs like following:
<div class="wrapper">
<div class="container">
container1
<div class="element">
fixed
</div>
</div>
<div class="container2">
container2
</div>
</div>
I want div: element to be fixed when it is inside div: container, but its position should become absolute when div: container2 becomes visible, it should not overlap with div - container2, but scroll away at that time with div: container.
A pure CSS solution is preferable, but if not possible I may go for a JS or jquery solution. I have created a fiddle for this, and tried some solution suggested here, which are not working.
What I would suggest is to use javascript to recognize when the scrolling is at a certain point with window.pageYOffset
When it reaches your desired window Y Offset you can start an event that modifies the css value of the positioning from fixed to absolute (by setting the parent container to relative) and bottom at 0.
Check out this jsfiddle https://jsfiddle.net/zq0kkkcx/2/
Also, this is the code that I'm talking about:
document.addEventListener("scroll", function(event) {
if(window.pageYOffset >= 1200){
console.log("1200");
// this is where you want your element to become absolute
// positioned to his parent container
// write your css changes here and apply them to elements
// add relative to container and absolute with bottom 0 to element
} if (window.pageYOffset <= 1200){
console.log("<1200");
}
});
If you want a CSS solution, here is a trick that you can do using z-index. Other than this there is a JS solution.
.wrapper {
width:100%
}
.container {
width:300px;
margin:0 auto;
height:1200px;
background:#ccc;
position: relative;
z-index: -1;
}
.container2{
width:300px;
margin:0 auto;
height:1200px;
background:#fcf;
z-index: 1;
}
.element {
background:#f2f2f2;
position:fixed;
width:50px;
height:70px;
margin-left:250px;
border:0px solid #d6d6d6;
}
<div class="wrapper">
<div class="container">
container1
<div class="element">
fixed
</div>
</div>
<div class="container2">
container2
</div>
</div>
You're looking for a sticky header. There is currently no way to make a header sticky at an arbitrary scroll position using pure CSS - you'll have to look into a JavaScript solution to accomplish that.
Yes, it is 100% possible to do this without any JavaScript
I updated your fiddle
Markup should be like this
<div class="wrapper">
<div class="outer-scroller">
<div class="scroll-container">
container1
<div class="fixed-header">
fixed
</div>
</div>
</div>
<div class="last-container">
container2
</div>
</div>
and css
.wrapper {
width: 100%;
height: 300px;
}
.outer-scroller {
height: 140px;
overflow-y: scroll;
}
.scroll-container {
padding-top: 70px;
width: 300px;
height: 1200px;
background: #CCC;
}
.last-container {
width: 300px;
height: 600px;
background: #FCF;
}
.fixed-header {
background: #F2F2F2;
position: absolute;
width: 300px;
height: 70px;
top: 0;
pointer-events: none;
}
You'll see I've added an outer-scroller div.
The next bit is changing your CSS slightly
The new outer-scroller div is double the height of your fixed-header (for the purposes of this example) and it has an overflow-y: scroll on it.
The container inside there is still the same.
The next change is turning your position: fixed into a position: absolute and then adding padding to the top part of the div you want to scroll in order to push its content "below" the new "fixed" header.
Scrolling over the outer-scroller div then makes its content scroll, and because its height is set with an absolute element on top it then scrolls "under" the fixed header.
Once the bottom of its child content scroll-container is reached, the whole page then continues scrolling, and you get the illusion of the header disappearing.
The last bit is pointer-events: none on the header so that it doesn't scroll away when the cursor is over it (but the div below does)
I would like to be able to create a div that spans the entire width of the screen. The problem is, this should work along with Weebly's design system, which places it inside a div of fixed width.
The content is created as the following:
#main-wrap {
width:100%;
}
.container {
margin: 0 auto;
width: 960px;
position: relative;
}
<div id="main-wrap">
<div class="container">
{content}
</div><!-- end container -->
</div><!-- end main-wrap -->
Inside {content} is where Weebly does its magic and puts all your stuff. I tried to directly embed some code:
.wide {
position: absolute;
left:0; right:0;
width: 100vw;
background: #aaccff;
}
<div class="wide">
Test
</div>
But this did not work, and the wide div was wider than the screen, but only starts at the same left position as the content div.
Does anyone know how to get a 100% wide div inside of the container. I could also make container 100% wide, but then all of the Weebly widgets go the full length of the screen, and its not clear how I can modify the CSS To make them have fixed width.
Thanks!
It's because of that the parent has is relative positioned. So, remove position: relative; from element .container
I have an element (in my case a HR tag) that needs to be as wide as the browser but which is also wider than it's parent container. However, it still needs to maintain relative positioning so that it scrolls vertically with the page. The problem is that my parent div has to have relative positioning as well (due to other layouts that are working).
The only way I have been able to solve this is to set the width of the HR tag to 3000px with a left position of -1000px. This works, but it adds a horizontal scrollbar to the page (to display the 3000px width). Is there any way to accomplish this cleanly (without the horizontal scroll bar)? You can see my fiddle at http://jsfiddle.net/UGwst/.
Here's the HTML:
<div id="layout-wrapper">
<p>Above Content</p>
<div id="content-wrapper">
<p>Top Content Here</p>
<hr class="rule" />
<p>Bottom Content Here</p>
</div>
</div>
Here's the CSS:
#content-wrapper {
width: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
background-color: #ddd;
position: relative;
}
.rule {
background-color: #dbb328;
height: 5px;
position: relative;
left: -1000px;
width: 3000px;
}
I realize that there are a couple of other questions here that are similar, but don't quite seem to fix this issue.
Use position:relative on the parent.
Use position:absolute on the HR, that way the HR is bound to the parent and will scroll with it.
To hide scroll bars use overflow:hidden on your outer wrapper, or BODY.
Try
body {overflow-x: hidden;}
to eliminate the horizontal scrollbar. According to this answer, it even works in IE6 - CSS - Only Horizontal Overflow?
Is it possible to let only a certain element overflow a parent div?
I'm hiding all the child divs from overflowing, but I need one of the children elements to overflow and float outside the limiting parent.
See http://sandbox.pixelcraftwebdesign.com/engineering and run some calculations with random numbers.
The little red number in the upper right-hand corner needs to float over and outside the output div.
not entirely sure what you are after, but here is a fiddle demonstrating a certain child div floating outside and displaying all of its contents: http://jsfiddle.net/dcpDa/
<div id="parent">
<div class="dontShow">Dont Show All Of Me</div>
<div class="dontShow">Dont Show All Of Me</div>
<div class="dontShow">Dont Show All Of Me</div>
<div class="dontShow">Dont Show All Of Me</div>
<div class="doShow">Okay, Show All Of Me</div>
<div class="dontShow">Dont Show All Of Me</div>
<div class="dontShow">Dont Show All Of Me</div>
<div class="dontShow">Dont Show All Of Me</div>
</div>
CSS:
div {
width: 5em; /*constrain div */
height: 1em;
border: 1px solid #aaa;
background-color: #ccc;
}
.dontShow { overflow: hidden; } /* do not show overflow */
.doShow {
width: auto; /* over ride constraints and show all */
height: auto;
position: absolute; /* break from flow */
left: 15em; /* position where you want */
}
Here are two articles on CSS positioning I found usefull recently:
css Floats 101
Css Positioning 101
If the element you want to overflow is text, the simpliest solution is :
.nowrap {
white-space: nowrap;
}
Here is the fiddle : https://jsfiddle.net/Flyout/dgh2erqj/
Assuming that you want the widths to remain the same:
Remove overflow:hidden from .output.
Set .output .right to width:257px;overflow:hidden.
Set .result-rh, .result-temp to width:241px.
This fix allows overflow on the container, but hides overflow on the right side. It also gives the right side the appropriate size, to prevent the result SPANs from being clipped.
Works for me in Firefox 3.6.17. Should work in other browsers as well.
Use position: absolute; on the child you want to show. You can then use top, left, height, and width to position it where you want.
I have a problem with setting the height of the div:
I have 3 divs and svg element one in each other in such way:
<body>
<div id="1">
<div id="2">
<div id="3">
<svg></svg>
</div>
</div>
</div>
</body>
(There are also other elements in div 1 and 2)
Assume that svg is very big (i.e. 2048x2048), I need that size of div3 (and this also would mean div2 and div1) to have size 100% of browser window (minus other elements and margins in uppers divs) - when a browser resize div also should. As the scg is bigger than div3 there should be a scrollbars in div3 (scrollbars should be in div3 not in whole browser window to scroll only content of div3 (the svg element) not of the whole browser content!).
I've already manage to make it works this way in width, but not in height,
when I set height of all elements except svg (also for body) to 100% as I found somewhere (also tried with min-height), then all divs are of height of svg and scrollbars apears on browser window, scrolling the whole page.
Try adding:
overflow:scroll;
To your CSS for div3.
JSFiddle
For any one interested in similiar case I managed to done this. I've resigined of using div3 (after all it wasnt needed) so the layout of page is smiliar to this:
<div id="1">
something
<div id="2">
<svg width='2048' height='2048' ></svg>
</div>
<div id="footer">something</div>
</div>
and css is:
body, html, {
padding : 0px;
margin : 0px;
width : 100%;
height : 100%;
}
#nr2{
overflow: scroll;
position: absolute;
top: 10px; /* must be the height of everything above div */
left: 0px;
right: 0px;
bottom: 10px; /* must be the height of footer */
}
#footer{
height: 10px;
position: fixed;
bottom: 0px;
}