Currently developing a portfolio theme for a friend and trying to create a video background in the hero area.
Currently, it appears the video is only taking its natural width, is there any way to force this to stretch to fill 100% of the div? I'm not worried about quality, it's blurred anyways.
I'm using videoBG to embed the video content, and the following styles are applied to the containing div:
#hero {
min-width: 100%;
display: block;
height: 400px;
margin: 0 auto;
}
It was actually the 100% height that I was applying to the video that was throwing it off in the first place. Changing this to auto let the video stretch while setting overflow to hidden.
Try to use that:
#hero { /* div filled by video */
position:relative;
/* other properties ... */
}
#video { /* video div */
display:block;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
Related
I tried to create a modal window having full height even if the content is small. I set css min-height:100% to .modal-dialog and tried various other options. But min-height is not working for modal window.
My requirement is:
Even if content is small modal window should be full screen
If content is huge modal window should have a scroll bar and should include all content.
You can use height 100% only if the object is inside an element with known height. If the parent have no height, the browser has nothing to reference.
Solution in pure CSS:
.my-div {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
You can set in jquery function where you open the dialog:
$('.my-div').css('height', window.innerHeight);
Try this
.modal-dialog {
width: 100%;
height: 100%;
padding: 0;
}
.modal-content {
min-height: 100%;
height:auto;
border-radius: 0;
}
How to make Twitter bootstrap modal full screen
I am working on setting up my opencart store. I have one large image as my background for my whole web page. Then all of the content scrolls over it and it stays put. The problem is that the background is not scaled correctly. It is scaled larger than the page. How can I get it to scale to 100% with opencart?
on my home page I have an img element and then use this to scale and position it.
img.bg {
min-height: 100%;
width: 100%;
height: auto;
position: fixed;
top:0;
left:0;
z-index: -999;
}
but with open cart I have to sent the image using the stylesheet rather than an image element. So I'm not sure how to apply these styles to the background class. The image is set to the background property of the body class.
The body CSS is probably the problem. You could try this
body {
max-height:100%;
max-width:100%;
}
I have an outer div, called #wrap, and two inner divs: #container and #footer. Content is inside #container, and is dynamic. There may be a little, there may be a lot.
When content is minimal, the footer div may appear half-way up the page. However, this changes depending on the monitor/resolution. What is 50% from bottom on a large monitor may only be 10% from bottom on a small/cluttered viewport.
If I use this css method:
body,html { height: 100%; }
#wrap { position:relative; min-height:100%; }
#container{ margin:0px 0px 50px 0px; }
#footer { position:absolute; bottom:0px; }
then the page will always extend to use 100% of the viewport and the footer will be at bottom of the viewport - exactly as required.
However, if the content increases (or if a small viewport), the footer may overwrite any content extending into its 130px height -- the footer will not bump down.
Is there a way to remedy this?
Note: I don't wish to use percentages for the footer height as it is fixed at 130px and cannot squish.
Here is a fiddle I've been using to experiment
This is the best example of sticky footer I've seen: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
UPDATE (April 2017): As the above link has become inoperable (and much time has passed since the original post) I'd like to offer the following solution to this problem:
Permanently fixed:
#container {
padding-bottom: 130px; // ...or more
}
#footer {
bottom: 0;
height: 130px;
position: fixed;
width: 100%;
}
For a dynamically fixed element, check out this jQuery plugin: https://libraries.io/bower/jquery-sticky-header-footer
My container div doesnt expand vertically on one of my pages as I add elements. Hence the bottom most div overlaps onto my footer. The divs in the container are horizontal elements relatively positioned
On my home page it works fine container expands and no overlapping using the css below
If I had any hair left it would be pulled out by now!! :-))
#container {
width: 900px;
margin-left:auto;
margin-right:auto;
top:50px;
position:relative;
height: auto !important;
min-height: 100%;
}
Seems to me to little context, because it is possible that the footer is overlapping your container div, which is set to start with a min-height of 100%, it depends on how the footer is defined related to your container div.
...............Demo
Hi now give to body, html height:100%; than give to any class or id height 100%;
as like this
body, html{
height:100%;
}
LIve demo
rule-selector
{
height: 100%;
}
If this doesn't work for you then a more particular rule might disable this rule, so make your rule-selector as particular as possible. If it is still not particular enough, then:
rule-selector
{
height: 100% !important;
}
Try this:
#container {
width: 900px;
margin-left:auto;
margin-right:auto;
top:50px;
position:relative;
overflow:hidden ;
}
Best,
Cynthia
I have a sticky footer which works, but I'm using a tiled background image and an inner #content div. The problem I have is that the #content won't expand to fill the height of the container. I've got a demo at http://jsfiddle.net/mpRUT/1/, where I've changed the colours to illustrate. The only thing keeping #content from collapsing into oblivion when the page is empty is the min-height set on it.
Can I get it to expand to fill the container, or do I just have to set a larger min-height and lose some browsers?
The effect can be seen at http://myfitzeek.lime49.com/
IMO: Will not work 100% without min-height. (see comments)
My old answer:
Edited sample (as fork):
http://jsfiddle.net/4EtKh/1/
#wrapper: {
/*min-height:100%;*/ /* remove! */
position:relative;
height:100%; /* new! */
overflow: hidden; /* new! */
}
#content {
text-align: left;
line-height: 140%;
background: #fff;
font-size: 1.2em;
/*min-height: 80px;*/ /* remove! */
height: 100%; /* new! */
}
Chances are good that you're going to need to set min-height: 100%; and subtract the footer height using negative margin.
#wrapper { margin-bottom: -60px; }
#footer { height: 60px; }
What are your target browsers? You express some concerns about min-height - why not design the footer to look acceptable if collapsed, so that it degrades nicely in an older browser? If you're using a sidebar in your finished design, you can use .clearfix techniques to force the footer to the bottom, which means it won't necessarily be noticeable.
Aside from doing position:fixed; on the footer and using a background image on your #wrapper to give the impression of a full-height content pane, I don't know of a way to make this work without using min-height on #content (like this).