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
Related
I'm trying to stop the body of my page from scrolling (at all) while a modal overlay is open.
The modal covers the entire screen ({position: fixed;top:0;left:0;right:0;bottom:0;}), and it has its own scrolling. However, when I run to the end of the scroll on my modal window, the main window starts scrolling behind it. I've tried everything I can think of to make the body stop scrolling. These things haven't worked:
CSS
body {
overflow: hidden;
pointer-events: none;
-webkit-overflow-scrolling: none;
}
#content { /* which contains all the non-modal content of the body */
-webkit-transform: scale(0);
position: relative; left: 100%;
}
using iScroll
blocking the scroll event of window or body
blocking the touchstart event on body
Looks like you're pretty close.
When your modal is open, try this CSS:
body{
overflow:visible;
max-height:100%; /* or 100px or something smaller than the screen if your viewport isn't set */
height:100% /* or 100px or something smaller than the screen */
}
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%;
}
My CSS:
body
{
margin: 0;
height: 100%;
}
canvas
{
background-color: black;
height: 100%;
width: 100%;
}
html
{
height: 100%;
}
As you can see, my body is as tall/wide as the window's available height/width respectively. My canvas has 100% height/width, and it seems like it should be the height and width of the inside of the window. But it isn't. It's a few pixels taller, and a scrollbar appears. Why is this? Can I make it work somehow? I don't think the canvas has any padding or anything. This occurs in both Chrome and Firefox.
You also need:
canvas { display: block; }
since canvas is an inline element, like img.
Inline elements get some "leading" underneath, just like the surrounding text does.
The browser may be getting confused: With the scrollbars, the canvas is too big to fit. Without them, it fits.
Ignore that, complete nonsense. <canvas> is an inline element, so it suffers the same problems as images. Add verical-align:bottom, or try this instead:
canvas {
background: #000;
position: fixed;
left:0; right:0; top:0; bottom:0;
}
Try this:
html, body {
height: 100%;
}
#container {
float: left;
width: 50px;
height: 100%;
}
You get container to use all height, but if you resize the window to 50% for example and reload the page, and once is loaded you resize the window to use the whole size the extra space is not used by #container (in this case will be using 50% of the total window size).
What's the best way to fix this and if posible using only css?
It is supposed to work :
http://jsfiddle.net/AhFnS/
Maybe you have an element containing your #container
I am create a div with 100% height
HTML
<div id="BottomShelf"></div>
CSS
#BottomShelf{ position:absolute; top:400px; left:0px; width:100%; height:100%;; background:#d4b7a0; z-index:1;}
There is a page scroll showing up on the page, but I need a page scroll (not div scroll) only when there is content. height:auto does not do the trick too.
I need the div to take the browser height irrespective to the height of the monitor.
try to set top: 400px; bottom: 0; instead of top: 400px; height: 100%;
EDIT: note that this might not work in IE6 (don't know about IE7)
The body tag has some default margin, so if you need a div to take the place as body, first set the body style to: margin: 0;
I tried creating a div with the following styles, and it seems to do what you want:
height: 100%;
overflow: auto;
overflow: auto will give the div a vertical scrollbar if the content exceeds the height.
Have you tryd the overflow:hidden; css style property?
Sorry it was overflow:hidden;