I got stucked on my css, i want to make my scroll bar fit on diffrent monitor resoution, and i use this css
div.scroll {
width:800px;
height:800px;
overflow:scroll;
}
but it will show differently in the other resolution, and if I change the width or height into 100%. the scroll bar just doesnt work. the scroll bar is still there but it shows the whole table, such a waste scroll bar.
any help will be appriciated
Try with this :
First set body style margin:0 as :
body{
margin : 0;
}
and the div.scroll as :
div.scroll
{
width:800px;
height:100%;
overflow:auto;
}
overflow:auto gives a vertical scroll to your div if the content is more than the height.
Have you tried using min-width and min-height?
HTML:
<div class="scroll">
<p>This is the scrolling area</p>
</div>
CSS:
div.scroll
{
min-width:800px;
min-height:800px;
overflow:auto;
}
.scroll p
{
width: 900px;
background: #cc0000;
}
Working Example:
http://jsfiddle.net/Aps83/
Not entirely clear on your desired outcome, but this will present scrollbars only when needed (small screen, content is too wide/tall to fit).
Related
I'm just trying to make my responsive div example work like here http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
The effect should be that if you resize the window, the div will change the width AND the height depending on the ratio (in my example 41,66%).
If you view my code from the beginning in a small window, the effect will work perfectly. But if you resize the window from large to small it will not work.
Can please somebody help me to find out what's going wrong? The height will not change in ratio.
The changing div is inside a container:
<ul class="slide">
<li>
<div class="wrapper">
Slides
</div>
</li>
</ul>
http://jsfiddle.net/Mg9ZB/
I know in Chrome it works well, but I'm using the newest version of Firefox.
I played around a little bit with your fiddle. At first I removed all values that influence the height of the wrapper and to center the text in the middle, I added padding of 20.83% to top and bottom.
*{
margin:0;
padding:0;
}
ul.slide{
list-style-type:none;
max-width:100%;
background:blue;
}
ul.slide .wrapper{
width:1200px;
height:0;
margin:0 auto;
background-color:red;
background-image:url('img/slideshow/state1.png');
background-repeat:no-repeat;
background-size:cover;
-moz-background-size:cover;
background-position: center;
}
#media only screen and (max-width:1199px){
ul.slide .wrapper{
width:100%;
height:0;
border: 0;
line-height: 0;
padding: 20.83% 0; /* 500px/1200px */
}
}
To see how the ratio of the wrapper changes I changed your JavaScript.
$(document).ready(function(){
var myVar = setInterval(function(){
$('p').html($('ul.slide .wrapper').outerHeight() / $('ul.slide .wrapper').outerWidth() +' ratio');
},1000);
});
Have a look at this fiddle to see what I changed.
I'm not sure if this is what you want, but if you resize now the ratio nearly didn't change. Found out, that I had to click "run" again in Firefox to get the right view after resizing.
all i am doing is a simple - creating a html page. however, i got 2 probs.
1) when i set the width in pixels:
i see width mismatch/conflict between IE8 and mozilla. (width:1024px)
this setting sets the width perfectly in mozilla (full screen size) but in IE, it exceeds the page/screen width and i have to scroll to the right to see some part of the page.
sample code:
html:
<div style="width:1024px">
2) when i set the width in percentage and resize the window:
the page shrinks and the whole page gets collapsed.
below is the code.
<div class="body">
<div class="header">
something
something1
something2
something3
something4
</div>
</div>
css:
.body
{
min-width:100%;
max-width:100%;
width:100%;
margin:0px;
background:grey;
float:left;
}
.header
{
float:left;
min-width:100%;
max-width:100%;
width:100%;
margin:0px;
background:#000;
}
how can i overcome this small glitch?
any help is appreciated.
Use a reset style sheet, or add the following to the css:
body,
html {
padding: 0;
margin: 0;
}
Generally,Internet explorer(lower version) browser scroll bar take some pixels. Just u put width 1000px or 100%, because 100% width all resolution and screen sizes appear full screen without scroll.
I think no need body and header float: left
I am opening a popup window (inside it there is a div for displaying the chart)
When the maximize button is pressed the components are not aligned properly.
So for this i have read that we also need to have a parent container to solve the issue.
So i kept this way :
<div id="parent" style="margin:0 auto; width:1000px; position:relative;">
<div id= "finance" style="position:absolute; top:10px; left:10px;"></div>
</div>
As a result of this , I am not able to increase the width of the div.
Please see the image here
My CSS is this
.centered {
width:100%;
height:100%;
}
.html{ width:100%; height:100%; }
.body{ width:100%; height:100%; }
Please tell me how to solve this problem.
CSS Experts please help me.
Yor are referencing to .centered in your CSS and there's no centered class in any div. Plus, style attributes have more relevance in the result than classes or even ids, so no matter what you put in your css, the div parent will always be 1000px.
Also, you didn't say if you need the div to grow with the window, or just to be centered when the window is maximized.
You need to get rid of all the style attributes and reffer to those divs with their id's in the css:
#parent {
width: 1000px; /* or percentage if you want it to grow */
margin: 0 auto;
}
#finance {
margin: 10px;
}
I have a div with following style: height:250px;scroll:auto;. I want it to scroll after 250 px but should have height according to the content in it.
For example, if the content in it is 100px, then, the height of div should be 100 without scroll. But, if the height exceeds 250px, it should show scroll.
How can do it?
Is this what you are after?
Demo
CSS:
.dyn-height {
width:100px;
max-height:250px;
overflow-y:scroll;
}
height: optional - just for the demo.
try this: max-height should do the trick.
html
<div class="height">
blah<br/>
blah<br/>
</div>
css:
.height { max-height:250px; border:1px solid red; overflow:auto; }
Use overflow-y with the auto option.
This way the scroll bar will not show up until it is needed.
Otherwise the scroll bar will display, even if you do not need it to show.
.my_div {
width:100px;
max-height:250px;
overflow-y:auto;
}
just try max-height and do overflow-y:scroll just it
.hidden {
width:100px;
max-height:250px;
overflow-y:scroll;
}
<div class="hidden">
<h5>If the content in this div exceeds 250px it should appear a scroll bar</h5>
</div>
Im not too great at CSS but hopefully someone on here can help. I have the following mockup. (i have stripped out my content to make it easy to view)
<body>
<div id="container">
<div id="header"></div>
<div id="body">
<div id="navBar"></div>
<div id="mainContent"></div>
</div>
<div id="footer"></div>
</div>
</body>
my CSS is as follows:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
now im unsure as to how to get the "navBar" to be the page height. I've tried adding height: 100% but that doesnt work.
Thanks,
Matt
Giving an element height: 100% will give it a height equal to that of its containing element, which in your case is #body. Since body in your example is only as big as it needs to be to hold its content, #navBar will be 100% of that height.
To fix this, you can make #container and #body height:100% to make them as tall as tho body tag, which takes up the whole page:
#container {
height:100%
}
#body{
height:100%;
}
In the interest of completeness, you could also set the top and bottom of #navBar:
position: absolute;
top: 20px;
bottom: 60px; /* height of footer */
To understand the difference, play around with This JS Fiddle. Mess around with the height and top, bottom, position properties to see how your changes affect the layout; just don't use both positioning methods at once!
Your issue appears to be that each parent DIV all the way up to the BODY tag must explicitely have a height of 100% for #navBar to have 100% height. This means you would also have to set the height of #body to 100% as well, since it is the parent container of #navBar.
Have a look at this site - I assume you want a two column layout - this site will show you how to do what you want. Hope it helps.