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?
Related
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;}
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
The problem is simple:
http://jsfiddle.net/boblauer/wfLGG/
In the left example, I have the whole thing scrolling, which works fine because I can set the scrolling div's height to 100%. In the right example, it doesn't work, because I don't know what my scrolling div's height should be, because it's sharing that space with another element. If I set it to 100%, it overflows from its container, causing the 2nd scrollbar that you see in the example.
I know I can use javascript to set the .scroll-container's height to (container height - height of the header), but is there a pure css solution to this problem? I hate having to use javascript for this, especially because when the window resizes, I have to recalculate the size of the scrolling div.
Edit: Sorry, I wasn't very clear. What I want is for the header to remain static at the top, while the list itself is scrollable.
I think this is maybe helpful
.scroll-container {
overflow: auto;
padding-top:20px;
}
#ex2 span{
position:absolute;
background:white;
}
jsFiddle
Set overflow: y-scroll; on #ex2 and it will behave as #ex1.
#ex1, #ex2 {
float: left;
height: 100%;
width: 45%;
border: 1px solid black;
overflow: auto;
}
#ex2 { overflow: y-scroll; }
Demo
I'm trying to create a page with a panel on the left side. The panel has a header, a content area and a footer. The main panel wrapper div is supposed to be 100% of the height of the page. The header and footer do not have a specified height because I only want them to be large enough for their text and padding while the center content area I want to be 100% of the container minus whatever the height of the header and footer is. I'm not sure how or if I can do this in css. Anyone know what to do here? Thanks.
The html page & css is here - https://gist.github.com/1641918
You can use display as table to accomplish this. By setting a height of 100% on the content 'row' and then 0% on the others. Tables try and make their rows match as closely as possible the specified heights.
http://jsfiddle.net/PZALU/
html, body { height: 100%; width: 100%; }
div#container { display: table; height: 100%; width: 100%;}
div#container > div { display: table-row; }
div#container > div > div { display: table-cell; border: 1px solid gray; }
div#header { height: 0%; }
div#content {height: 100%; background: lightgray; }
div#footer { height: 0%; }
I have dealt with this on several occasions. It is possible to to with just CSS in one or two specific cases from my experience. Otherwise, you would need to tag team it with Javascript and CSS. Because, in order to set an element to 100% height, its parent element's height must be delared. Depending on how deeply nested the element is and what siblings it may or may not have before it, will determine if its possible to do with CSS alone.
One method of getting a conent container div to be 100% of the height browser's viewport is via the following styles.
html {
height:100%;
}
body {
height:100%;
}
#container {
min-height:100%;
max-height:100%;
}
<html>
<body>
<div id="container">
...
</div>
</body>
</html>
It can easily get tricky depending on the layout.
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