I have a header pic which is made up of a Vuetify carousel.
The section container for the carousel is 100vh and the v-carousel element height is set to be 100%.
I would expect that setting a min-height of 300px on the section element would prevent the carousel pic from having a height smaller than 300px. Instead, while decreasing the screen height, I notice a line marking the min-height but the pic inside becomes smaller as I reduce the height of the screen. Below there is my code, can someone suggest what I am doing wrong? I see from the inspection tool that the v-carousel-item is a div with a background-image and I wonder if this affects somehow my code.
<template>
<div class="home router-view">
<section style="height:100vh;
background-size:cover;
background-attachment:fixed;
background-position:center;
position:relative;
max-height:1300px;
min-height: 400px">
<v-carousel
cycle
hide-controls
hide-delimiters
style="position:absolute;top:0;width:100%;height:100%"
>
<v-carousel-item
:src="require('#/assets/images/picture.jpg')"
>
</v-carousel-item>
I am confused by your styling. Are you trying to make the cover the whole page (100vh), all the time? Then you don't need min-height or anything.
Anyways, try adding min-height:100% inside v-carousel's styling to force height.
If it doesn't work, please see v-carousel's props and try add height="100%" natively provided by vuetify.
see: https://vuetifyjs.com/en/api/v-carousel/#props
If you provided a reproduction, codepen etc. your problem would be much clearer to understand.
Please let me know if it works!
Related
I need your help!
Been searching for a solution, but couldn't find one, so thought I should just ask it.
For a school project I need to postion a random number of halls into the right position on a map.
As an example I just used 4 halls an just hard coded all the info that's retreived from a JSON with Angular as you can see in this CodePen
<div class="hall" id="hall01" style="width:15%; padding-bottom:50%; left:00%; top:00%; background-color:red;"></div>
<div class="hall" id="hall02" style="width:85%; padding-bottom:20%; left:15%; top:00%; background-color:green;"></div>
<div class="hall" id="hall03" style="width:15%; padding-bottom:10%; left:85%; top:40%; background-color:yellow;"></div>
<div class="hall" id="hall04" style="width:85%; padding-bottom:20%; left:15%; top:60%; background-color:blue;"></div>
I already have solved the issue of resizing the halls, when the page gets resized.
The only problem that remains is that the absolute positioning with top isn't working like it should.
Everything is calculated with a width of 1000px and a height of 500px in mind, but it should all resize if the browser also resizes.
Also getting the parent to adjust to the right height is something I struggle with.
Can somebody please help me with this?
The problem is that when using the top property, percentages are calculated based on the height of the container, not its width.
To fix this, set the top to 0 and then use margin-top: x%;. All margins are calculated based on the container's width, so the margin-top will shrink as well when the window is resized.
Not sure how to best ask my question. And I can't yet post screenshots. :( This issue does happen in mere current coding practices. You can currently even see this issue happening on Facebooks home page.
Here's my URL:
www.alpacanation.com
How to replicate live
Grab the right hand side of your browser and pull inwards. Eventually a scroll bar appears. Not necessarily bad. As I have a fixed with here. However… Notice the scrollbar is the length of the background color up in the top of my header which is actually creating a "Curtain" like effect.
Make matters worse:
If on other high level parent elements like .Footer or .Page you play around with overflow and position relative the curtain will then begin overlaying on top of the entire site.
Check out Facebook: They often have this issue as well. Obviously most don't notice it as it's not going over top of the content.
In either case I know there is something not right.
Help appreciated!
Add something like this to your CSS:
body { min-width: 980px; }
You have min-width: 980px; set in many of the elements on your page, but not on html, body, or .container. Once the viewport is smaller than this, these elements will overflow html and give you the scrollbars you're seeing.
But this doesn't make html any bigger. It--and its background--is still at the viewport size. This is why you get the "curtain" effect when you scroll.
Setting width: 100% on html doesn't fix this; this only sets html to 100% width of the browser window. If you're going to use min-width, make sure you you don't just apply it to elements that hold your content, but also those that have your backgrounds.
to fix this, add
html, body {
min-width: 980px
}
in your www.alpacanation.com/styles.css:40, then you are done. :)
EXPLANATION: the problem is this container,
<!— stat container —>
<div class=“container”>
<!— START FOOTER MENU SECTION —>
that container has width:980px which screws up the view because it forces that container to stay at 980px wide while the rest is shrinking, thus creates the ‘curtain’ like effect.
UPDATE
Here's a fiddle to play with:
http://jsfiddle.net/UnsungHero97/RQCt3/1/
Here are two screenshots that show what I'm encountering...
The weird thing I'm encountering is this. When I hover my mouse over the <img> element, it shows its dimension as 288x72, which is what I expect it to be since I set the height of the image as 72.
However, when I hover over the <div id="logo"> element, it shows its dimensions as 288x76, which means there is an extra 4 pixels somewhere contributing to this height.
If you notice the CSS properties for the <div id="logo"> element, there are no paddings or margins or heights specified.
So where are these pixels coming from? Why is this happening?
An easy way to fix this is:
img{
vertical-align: top;
}
Live example: http://jsfiddle.net/RQCt3/2/
The reason is that images in HTML are considered inline elements and so by default are aligned on the font base line. The extra space is probably to allow for the bottom of letters etc.
Similarly adding display:block will also do the job:
img{
display:block;
}
SOLVED
I used the solution proposed by Roman below, based on adding an additional DIV with position:absolute, I tested it in IE7, IE8, IE9, Chrome and Firefox and seems to work fine!
So the layout now has 3 full background images (what I needed), and even you can use the BODY bg taking care of that will be cutted off to the browser's viewport height (still could be useful in some cases), "three and and a half" bg images with "sticky footer" :)
The only drawback I found its that the links in the #footerContent were not "clickable", I solved it using position:relative to this container.
I made the changes to the sample I provided and uploaded it to my Dropbox, In the case that someone else could find it usefull.
Thank you all for your answers.
http://dl.dropbox.com/u/512412/html_stackoverflow_solution.rar
I uploaded
I'm building a quite complex layout for a website where I need to have 3 background images covering the background of the web page. So I have one in the HTML style, one in the BODY style, and the final one in a DIV that it's the container for all the webpage elements (#contenedor)
I'm also sing a "Sticky footer" technique, to have the footer "glued" to the bottom of the page whern there are small contents in the "main content" area.
The problem that I have It's that the BODY bg image gets cut off to the viewport of the web browser, I mean, It doesn't repeat-y below the visible area displayed when the page is loaded, and the contents are "tall" enough to make the webpage scroll.
What I tried until now:
To add an additional container DIV surrounding all (that's ok for me), but doing that It brokes the "Sticky footer" (maybe I did not found the right way to do it... I don't know).
Force the BODY to be as tall as the HTML using:
html>body {
min-height:100%;
height:auto;
height:100%; }
This solves the BODY issue, the image repeats but this also breaks the "Sticky footer"... :(
You can see a sample:
Index with "small contents" all OK... footer on bottom, etc.
http://carloscabo.com/bg/index.htm
Index page with tall contents (simple BRs), scroll down to see the cut on the BODY bg Image
http://carloscabo.com/bg/index_tall.htm
You can also download all the files of this sample in the following URL to do your own local test.
http://carloscabo.com/bg/stackoverflow_html.zip
For a reason I don't quite catch, it seems that the body is stuck with a height of 100% of the viewport. It refuses to grow past this point, and does not inherit the real height of the whole page.
However, if you don't mind to add another helper div, you can easily solve the problem.
First lets start with the html:
- Add a helper div before the head section.
<div id="contenedor">
<!--HELPER DIV GOES HERE: BACKGROUND FIX-->
<div id="bgfix"></div>
<header id="arriba">
...
</header><!--header#arriba-->
...
<div class="push"><!--Sticky Footer Push--></div>
</div><!--contenedor-->
And now let's modify the CSS:
- Remove the background from the body, and put it into the new helper div like so.
body {
height:100%;
min-height:100%
text-align:center;
// background:url(../img/bg_body.png) center top repeat-y;
color:#fff;
}
#contenedor {
position:relative; /* For #bgfix to attach here */
...
}
#bgfix {
background:url(../img/bg_body.png) center top repeat-y;
position: absolute;
width: 100%; height: 100%;
z-index:-1;
}
And VOILA!
Hope it helps!!!
The solution I found for this problem is to set min-height to the
min-height: 900px;
900px was the actual height of the background image i used.
I would need to see exactly what do you want to accomplish in order to help you better,
but i will make my best giving you some tips in advance
you shouldn't be applying a background to the HTML tag.
dont play with the height property of your body, it will mess up the sticky footer, instead let body height grow naturally with content.
body will grow with the content, but html wont. html tag IS NOT a container.
In my page there's only one image. Kind of 1500x3000 px.
In the printer, I need that this image's maximum width to be the width of the page, so I did: width 100% in the css, and it works.
But the height... the old bullshit of height 100% will never work. Because it always will be 100% of the parent container, then someone must have height defined. Or html or body.
So, my question is: make this image fit in one page.
Any ideas?
One way to do it would be to perform some calculations to find out what width would cause the length to be exactly one page, and then set your width in the CSS accordingly.
If I understand this right, could you do
.OnePageImage { height: 100%; width: 600px; }
Where 600px (the width) is the total width of the page. Then the image would fit on one page (albeit with some distortion potentially). You could also add a css page break style to a div before and after the image, which is done like this:
.break { page-break-after:always; }
Then the code would look like this:
<div class="break"></div>
<img src="[your image src]" class="OnePageImage" />
<div class="break"></div>
The only thing that limited the print output to a single page for me was setting the height in cm of a container element that wrapped the entire page, and also setting it's overflow to hidden. For some reason this didn't seem to work on the body element.
body > section {
padding:0 !important;
margin:0 !important;
height:25.7cm !important;
overflow:hidden !important;
}
Incidentally, I had hoped that setting page-break-inside to avoid on the body or the container element might have been the solution to limiting to a single print page but that doesn't seem to have any effect at all.
Ok sorry for putting the "solution" as a comment:
What I've ended up doing was assume that 99% of the clients (that's true) they use a single page size. So I put some warning in the print interface that will only work with the page size "X". too bad. but it's working out so far