I wanna make this calendar height:100%.
I tried to change css:
.calendar{
height:100% !important;
}
.c-grid{
height:100% !important;
}
.c-event-grid{
height:100% !important;
}
But it doesn't work with this css. I want it to be responsive 100%. Currently it is set with specific height.
Here is the jsfiddle.
By inspecting the fiddle, you can see that the reason for the calendar not stretching to the bottom is that it's actual parents don't.
If you add the following, it does as expected:
body, html {
height: 100%
}
body height is 0.Try this. It works in jsfiddle.
body{
height:100vh;
}
.calendar{
height:100% !important;
}
Related
I created a page in Wordpress. I need the #content to be 100% width and height with a background image that resizes as the browser window changes.
Any recommendations how to achieve this?
Erik
In your style sheet:
#content {
width:100%;
height:100%;
background:url(path_to_your_image.png) no-repeat top center;
background-size:100% 100%;
}
The height working might be tricky. You could just add to your style sheet file as well...
html {
height:100%;
}
or if that doesn't do it try this...
body, html {
height:100%;
}
..and hopefully it doesn't cause any other problems.
So I just started using bxslider.
I however I'm having issues setting the size of the slider. Naturally it takes the height of the largest element (I think). How do I set it to a fixed height, say 200px?
You can add following css.
.bx-wrapper, .bx-viewport {
height: 200px !important; //provide height of slider
}
Check out this fiddle..bxslider
Why not style the elements?
If you set a fix height for the wrapper you could get in trouble with overflows and positioning.
If you are using lists:
.bx-wrapper ul li { height: 200px; }
You need to set all 3 elements involved with the height of the image displayed which are the main container, the inner container and the images themselves...
like so:
.bx-wrapper, .bx-viewport, .bx-wrapper img {height: 500px !important;}
i should note that:
bxSlider uses 100% width to keep stuff responsive so you might get a distorted image by forcing the height, and that is why you need to serve pre-sized images to the slider (just to fix the height issue..)
solution:
use media queries to set a different height when viewed in mobile (just a suggestion)
best of luck...
This worked for me, and allows you to keep responsiveness
.bx-wrapper, .bx-viewport, .bx-wrapper img {max-height: 200px !important;}
I solved centering and fixed size with these lines
.bx-wrapper img {
height: 400px;
max-width: auto;
display: inline;
}
I would recommend wrapping it with a div then adjusting the div's CSS. Bxslider I believe inherits the height & width.
.yourDivClass{
height:200px;
width:200px;
}
From here you can adjust the li's accordingly:
.yourDivClass li {
background-color:green; //just to see the overflow if height & width isn't equal
}
Hope this helps.
Update!
http://jsfiddle.net/u62LR/
Just set your image height...
.bx-wrapper, .bx-viewport {
height: [IMAGE HEIGHT] !important;
}
If you don't want use !important just make like this
.bx-wrapper {
height: 400px; //Just choose your height
display: block;
overflow: hidden;
}
Just use the max-height:
.bx-wrapper .bx-viewport{max-height: 657px;}
I have the following HTML: A sidebar with a color full height an left side outside of the page of a color, so i have an image to cover the left side of the page and goes to the full height, but in chrome it doesnt cover the full height of the page with repeat-y;
my css: (doesnt work in chrome)
body {
background: #000 url(../images/bar_bg.jpg) repeat-y;
}
#container {
height: 100%;
}
I want to achieve this:
Is there is another way to do it without images or with CSS3 maybe?
Your html and body are not covering the entire viewport, use...
html, body {
height: 100%;
}
I would have to do some work with the code, but this sounds like the margin-height needs to be set to zero.
solved with
html, body{
min-height:100%;
height:auto;
}
I need a div height changable if the screen size changes.
I also need that div is scrollable because the content may be Large.
But only when it is larger than the screen zize.
Also it should Work on IE6
Is there any Possibility for that?
If yes,
Please Give me the Complete css, html and javascript.
set width 100%; It's works
body {
width:100%;
height:100%;
}
#wrapper {
width:100%;
background:#ccc;
}
if the div is a direct child of body than just set height: 100% on both the div and the body. Like this:
body, #your-div-id {
height: 100%;
}
As far the scrillability is concerned just go:
#your-div-id {
overflow: auto;
}
Makes sense to you?
I tried using
height: 100%
but this makes the div only as high as its contents - it just contains a single word of text.
How can I force the div to use the screen height instead?
You need the body and html elements to have 100% height as well.
Try the following CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
YourDivSelector {
height: 100%;
}
The margin and padding must be set to 0 to prevent autoscroll in Firefox.
You should set all the containers that contain the div to height:100% as well, including the body and html tags.
You also need to set html and body to height:100%;
html,body{height:100%}
I had the same issue. Setting the html and body height to 100% didn't work, but when I combined min-height of 100vh and a height of 100% on the div it worked.
html, body {
height: 100%;
}
div {
min-height: 100vh;
height: 100%;
}
You can get the width and height of the window using JavaScript and then use those values to set the height and width of the div, as needed.
maybe
min-height:100%;
what are you trying to do exactly? post some more info and we can help you more
You can only meaningfully use height=100% if its containing element's height is definided. Its 100%, of what? no height if defined anywhere. You can use javascript to get the height of the current window (as previously mentioned), or specify a specific height of 800px or whatever value. :D