I'm trying to create a horizontal image scroll using flexboxes, which I am fairly new to. I'm very happy with its abilities but here is one thing I cannot figure out.
So it seems to be fine as long as the parent and the child are within the width of the window but as soon as the child (and also the parent) extend past the width of the window something causes it to give the window some extra height. I've watch a bunch of videos and googled a lot. I don't know this is.
Here's my SCSS:
.images {
position: absolute;
left: 0;
top: 0;
height: calc(100% - 70px);
z-index:0;
display: flex;
flex-direction: row;
.image {
width: 100vw;
height: 100%;
overflow: hidden;
border-right: 4px solid white;
}
}
Okay, I figured it out. I didn't declare overflow-y: hidden. And there was an image in the child container that was making my whole document taller. Yeah, I didn't provide enough information for this question to be properly answered.
Related
Apologies if this has been asked before, but I've been checking quite a few other related threads and they've not been exactly what I'm looking for.
So I have a 1280x720 video that I was hoping to make my page's video background. I want it to scale to fit viewport height at all times, but NOT change aspect-ratio.
So this means that if the viewport ends up wider than 16:9, then I can have black-bars/letterboxing on the sides.
But if the viewport is narrower than 16:9, the sides of the video are cropped (I'm fine with this, as all important parts of the vid are in the center).
How would you suggest I do it? It's been driving me crazy.
I had the same issue earlier. This is how I resolved it.
.containervideo {
width: 100%;
height: 100%;
position: absolute;
padding: 0;
margin: 0;
left: 0px;
top: 0px;
overflow: hidden;
}
The code is straight forward.
Well, without a working example it is hard to give a suggestion that will definitely work but here may be something that will send you in the right direction.
Create a wrapper around the video that has an absolute position and use flexbox to center the contents (the video) in the center of the page, then give it a black background. You can do that with something like this:
.wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: #000000;
}
You may need to play around with the CSS for the video perhaps like this:
video {
width: auto;
height: auto;
max-width: 100vw;
max-height: 100vh;
}
Something like that should give you the results you are looking for, or at least close to them. (I did not test this though)
Hope this at least gives you some ideas if it does not work. In the future, it is best to add your current code to make it easier for us to see what you have actually tried.
I have this example for the very known fill-parent height problem: http://fiddle.jshell.net/y9bM4/379/ I've really tried to find a solution by googling but I cannot find anything for these requirements:
The height of the element is not known, neither by percentage nor by absolute size. So position: absolute; top: ?px; bottom: 0px would not work
The upper box should only take up the space it needs for its content, so with my little knowledge about flexbox, it seems that I cannot use it either (just used it in the example because this is kind of as closest as I got)
The outer container has a fixed height (90% of the body in this example)
It would be nice if flex: 1 in each container, is kind of the maximum growth of the upper container. Is this even possible with css yet?
I'm not exactly sure what you're trying to do, but I'm assmuning you would like the second container to use whatever space is left over after the first container is sized to its content.
If so, set the .content class with height:0 and flex-grow:1
UPDATED EXAMPLE:
http://fiddle.jshell.net/y9bM4/385/
I think problem was that you gave the container id height:90%; so it will have to forcefully cover inside it, which is not posibble, So change it with height:auto;.
This will solve your problem
JSFiddle : Updated
CSS : Code to change (Edited)
#container
{
display: block;
position: fixed;
height: 90%;
width:100%;
overflow: hidden;
background: #fff;
border:2px solid green;
}
.content:nth-child(2)
{
position: relative;
display: block;
overflow: auto;
height: 100%;
}
.content{
border:1px solid red
};
.text
{
height: 100%;
display: block;
}
So I was working on a website when I came across the problem of my footer not staying at the bottom of my container div (the footer was not inside of the container, it was placed after it in the HTML). I realized this was because some of the child divs were floated, so I had to put overflow:auto on the container--HOWEVER, because I needed the children to have percentage heights, I had the height at 100%, and as you probably know overflow:auto + specified height = scrollbar. But having just a min-height wouldn't allow the child divs to get their height. Having both certainly doesn't work.
I recreated the problem in some separate testing files, getting rid of all the unnecessary CSS (although I'm sure some still remains) so I could visualize the problem without clutter. It's on this JSFiddle currently. I have the height commented out currently, because ideally I won't be using it.
Here's my container div CSS:
#container {
position: relative;
width: 70%;
/*height:100%;*/
min-height: 100%;
overflow: auto;
margin: 0 auto;
background-color:#FFDA8A;
}
And one of the child divs that needs a percentage height:
.featured {
position: relative;
width: 100%;
height: 50%;
background-color:red;
}
EDIT: I want to add that I know why this is happening, rather that I was wondering if anybody has stumbled upon a CSS-only way of dealing with it. If it can't be percentages, then I'll look into flex-boxes instead (as mentioned by PiniH, thanks!).
It's an old question, with no really good answer, usually when stuff get like this, you should use flex boxes in the end, the min-height property will not affect the children, unless it's a table, and then it gets a mess.
You can add:
#container {
position: relative;
width: 70%;
/*height:100%;*/
min-height: 100%;
height: 1px;
overflow: auto;
margin: 0 auto;
background-color:#FFDA8A;
}
But then it won't grow which I guess is why you used min-height in the first place.
I have been boggling my mind around this for a while, eventually I think flex is the only answer in this case.
I have a div, well, 2 div's and when I hover over the "main" div, I want the hidden div to appear (located inside the main div) and then pop its bottom out to stretch to fill the remainder of the bottom half of the screen.
An example would be:
I'm not asking for anyone to write code for me. I would very much appreciate any links/resources you might have that could point me in the right direction. I've been at this for hours, and I don't want to have a completely broken-up layout just to achieve this effect, but I'm just not able to get it.
I have tried this and many variations of it with no success:
HTML:
<div id="main">
<div id="hiddendiv">
</div>
</div>
CSS:
#main{
width: 150px; height: 75px;
background-color: #0061cc;
}
#hiddendiv{
visibility: hidden;
width: 75px; height: 100%;
background-color: lightgray;
}
#main:hover > #hiddendiv {
position: relative;
height: 100%;
visibility: visible;
}
Well, I've got some good news and some dumb news.
The dumb news is that for all intent and purpose, it's approximately 137% impossible to use nothing but CSS to specify that an object take up "the rest of the height", without using some sort of hard-coding, even if that hard-coding is in percentages.
Even using what was supposed to be the magic bullet ( calc() ) in CSS wouldn't be guaranteed to work, because you can't necessarily do a calc which says "based on the current scroll-position, and the relative position of the top-edge of my parent, and the remaining pixels to the bottom of the screen, set my height to THAT".
Any CSS-only solution that I gave you would fall short by:
only stretching to 100% of the parent's height
stretching to 100% of the page's height (including going up)
would require a guarantee that your parent isn't going to move up or down, at all (no scrolling), or that when the pop-out comes, the user won't be able to scroll until the pop-out goes away (or would look at home if the pop-out stayed stuck on-screen, in the same spot while a user scrolled up or down)
There's the bad news.
The good news is that this isn't a particularly difficult fix in JavaScript.
You'd want to use getBoundingClientRect on the pop-out, and use the .top property of the returned object, to figure out what your top edge is.
Then you could use your document.body.scrollTop and window.screen.height to figure out where you are, in relation.
ie: childEl.getBoundingClientRect().top - document.body.scrollTop should equal where you are onscreen. Subtract that from window.screen.height and now you know how tall you need to be to hit the current bottom-edge (which could still be scrolled past).
This is not a bulletproof, cross-browser solution.
But it's a starting point.
Also, I'd suggest that you use display:none, rather than visibility:hidden. The difference is that if you set the child to be width:200% it's going to give you a big, ugly scrollbar off the side of the page, even though it's invisible. visibility:hidden still pushes stuff, even if it's just pushing the edge of the page off to the side.
display:none hides the stuff, but also stops pushing everything.
Sort of like the difference between The Invisible Man and a ghost, trying to squeeze onto a packed subway car.
I think you are looking for this....
HTML
<div id="main">
<div id="hiddendiv">
</div>
</div>
CSS
#main{
width: 150px; height: 75px;
background-color: #0061cc;
}
#hiddendiv{
visibility: hidden;
width: 150px; height: 100%;
opacity: .7;
background-color: lightgray;
}
#main:hover > #hiddendiv {
position: absolute;
height: 98.5%;
visibility: visible;
left:260px;
}
#main:hover
{
width:400px;
}
DEMO
I hope this may help you.....
After a few more attempts using JSFiddle, I am finally satisfied with the result.
HTML:
<div id="main">
<div id="hiddendiv">
</div>
</div>
CSS:
#main{
width: 150px; height: 75px;
background-color: #0061cc;
}
#hiddendiv{
visibility: hidden;
width: 75px; height: 100%;
opacity: .7;
background-color: lightgray;
}
#main:hover > #hiddendiv {
position: absolute;
height: 98.5%;
visibility: visible;
}
After a long long while I had to do some frontend, and I have a annoying issue to resolve.
So basically I have 1900x1200 Div wrapper and while the whole thing looks pretty and centered on huge monitors, when I open it on a small/resolution monitor it isn't centered.
I would like the opening position to be in the middle of the whole thing regardless of my resolution.
Any ideas?
The whole thing is driving me nuts and I can't seem to be able to wrap my head around it. :(
(and I'm sorry if I don't make much sense, its 2:25 am here, I'm not a native speaker and my brain is fizzling out)
You could center the div through absolute positioning.
#DivWrapper {
width: 1900px;
height: 1200px;
position: absolute;
left: 50%;
margin-left: -950px;
}
Example: http://jsfiddle.net/AXenC/
If your interface is base on a smaller width than 1900px probably more like a 960 grid, you could center your background in in the body tag and center the wrapper(width of your content ie: 960 px) with the margin auto on the left and right.
body {
padding: 0;
margin: 0;
background: #aeaeae url(../images/back__v_1.jpg) 50%;
}
#wrapper {
width: 960px;
margin-right: auto;
margin-left: auto;
}