I've been thinking this for almost a days. But I can't find any solution in my problem.
Is there a way to set auto height div with scroll bar, because as of now I'm using a fix height but I see the problem that when I open it in another laptop or pc with bigger or smaller screen resolution its still in the fix height.
Here's my div:
<div style="overflow:auto; width:1050px; height:760px;">
here's my link so you can see the program
All I want is the height will be auto depending in the screen resolution..
You could use a script to get the computed window height and set it equal to the targeted element height. In this instance, the function is executed on load and on resize. Each element with a class of autoheight will be given a height equal to the height of the window's height:
EXAMPLE HERE
var setElementHeight = function () {
var height = $(window).height();
$('.autoheight').css('min-height', (height));
};
$(window).on("resize", function () {
setElementHeight();
}).resize();
The above method is fine as it doesn't require any changes other than the addition of a class; however if you wanted to avoid using jQuery, you could do something like this instead:
EXAMPLE HERE
html, body {
height:100%;
width:100%;
}
.autoheight {
height:100%;
}
You can try using fixed position:
<div style="position:fixed; overflow:auto; width:100%; height:100%;">
Related
I'm trying to center an image vertically inside the div. I've read few other similar questions here on stackoverflow and decided to use this solution:
<div id="wrapper">
<div id="cell">
<img />
</div>
</div>
#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}
This works great for images smaller than the viewport size. Problem occurs when image is larger in height than the view-port. In that case wrapper div simply becomes the height of the image. And it overflows the page. How do I avoid that.
This wrapper div is part of view-port div. Viewport div is of fixed height and 100% width positioned absolute
#view-port{ height: 600px; width:100% }
EDIT: I think I caused some confusion regarding the question. I've created JSfiddle to explain what I mean
Here is a link: http://jsfiddle.net/sublime/fgTtj/
I want to vertically center the image inside #outer I dont have image dimensions, as you can see on fiddle, it works perfectly, but when #outer divs height goes less than image height, say 200 it cuts the image. I want to instead shrink that image to fit the outer div
This answer has been truncated and edited to meet the needs of the OP.
Using jQuery, here is what I would suggest.
You can get rid of several of your divs and just use a wrapper and your image. The problem with your code above is that you gave your outer div a set height at 300px. This means that it won't ever shrink smaller than that. I've written a small script to account for the window size as well
http://jsfiddle.net/fgTtj/40/
I've set up your HTML like so:
<div class="wrapper">
<img src='http://s13.postimg.org/b7hmfvhyv/css.jpg'></img>
</div>
CSS like so:
.wrapper {
position:relative;
width:100%;
height:300px;
background-color:blue;
overflow:hidden;
}
.wrapper img{
position:absolute;
max-width:100%;
max-height:100%;
}
and the new jQuery looks like this:
function center(){
var imgW = $('img').width();
var imgH = $('img').height();
var half_imgW = imgW / 2;
var half_imgH = imgH / 2;
$('img').css({
left: "50%",
top: "50%",
margin: "-" + half_imgH + "px 0 0 -" + half_imgW + "px"
});
}
$(document).ready(function(){
var wrapper_Height = $('.wrapper').height();
center();
$(window).resize(function(){
console.log(wrapper_Height);
var winH = $(this).height();
var wrapH = $('.wrapper').height();
if(winH <= wrapH){
$('.wrapper').height(winH);
} else {
if(wrapH <= wrapper_Height){
$('.wrapper').height(winH);
}
}
center();
});
});
You can resize this window in any direction and the image will stay centered and not cut off. This only works for one window at the moment, so you would have to adjust the script to accomodate more.
The awesome thing with this is that it will run in just about every browser, where display:table-cell does not work in older browsers such as IE6 and I think IE7.
What is the point of the display:table? You could leave it blank (or use display:inline-block), and add an overflow property.
#wrapper{
overflow:hidden;
}
If you want to be able to scroll to see the rest of the image:
#wrapper{
overflow:scroll;
}
If you don't want the image to extend the viewport height, set the max-height:
#cell img { max-height: 600px; }
How can I make the height of a div tag auto resize according to the height of the browser?
When I do height: 100%, it only resizes based on how much text is in there.
Here is the web page and it's the first div, the one with the blue background is the one that I am trying to make the height auto resize:
http://rachelchaikof.com/awareness/
Actually you must be missing to set an height: 100%; for parent elements, also make sure you use this to make your div height 100%
html, body {
height: 100%;
width: 100%;
}
100% height - resize window problem
"height:100%" means 100% of the browser window. If the page beyonds the browser window (ie. needs scrolling to access) those bits of the page are outside the elements set to height:100%. Which if you have backgrounds or other effects (e.g. borders) won't extend beyond the first 100%.
The correct way to handle things is
selector {min-height: 100%;} /* for proper browsers */
* html selector {height: 100%;} /* for IE */
If you use min-height in this way, you must ensure all the antecedent elements have a fixed height of 100% (ie. html & body).
or you can use Jquery.
$(window).resize(function() {
$('body').prepend('<div>' + $(window).width() + '</div>');
});
height:100% means the same height as the parent, that is, the element your div sits in. So if you want to make it the same height as the browser, you'll need to make all its ancestors 100% high, all the way up to html!
When is comes to responsive design there are many creative ways to approach the issue at hand.
You could try using percentages to make your Design more responsive. Using percentages is a safe bet for maximizing on the users viewport.
eg.
html, body {
height: 100%;
width: 100%;
}
From there you can play with your site containers and go more specific.
Also some JavaScript in your head section of the HTML can help you detect screen sizes and adjust different CSS rules accordingly:
<!-- hide script from old browsers
//<![CDATA[
var windowWidth=screen.availWidth;
var windowHeight=screen.availHeight
function sniffer() {
var el=document.getElementById("body");
if(screen.width<=600) {
el.style.width='100%';
el.style.height= windowHeight;
el.style.margin="auto";
}
}
onload=sniffer;
//]]>
// end hiding script from old browsers -->
The JavaScript above is checking if the user's screen is smaller or equal to 600px; if so, it adjusts the width, height, margin rules for the body element.
Hope this helps!
I'm working on building a mobile friendly site of our companies main website. The way it is designed is around 2x for retina. What I'm planning to do is set the main content around a maximum width of 640px, width set at 100%. I have a certain background image that fits nicely do that. But as the width of the div gets smaller, I need the height to adjust as well. Any ideas?
Here's the css:
*{margin:0;padding:0}h1,h2,h3,h4,h5,p,li,a,cite{font-size:14px;font-weight:normal}button,img{border:0}body{font-family:Arial, sans-serif;}
body {
margin:0;
background-color:#fff;
}
.top, .body {
max-width:640px;
width:100%;
margin:0 auto;
}
.top {
background: white url(images/top.jpg) no-repeat;
background-size:auto;
overflow:hidden;
height:124px;
max-height:124px;
}
.top ul {
list-style:none;
height:100%;
}
.top ul li {
height:100%;
float:left;
display:block;
}
I did find an answer to this. It adds a little bit of unsemantic markup, but works well.
Can find it here: http://jsfiddle.net/AdQ3P/
The logic is in the padding-bottom. basically this needs to be (img_height / img_width) * 100.
Edit Here's the code, so not dependent on jsfiddle.
<div class="container">
<div class="hero"></div>
</div>
.container {
width:100%;
max-width:500px;
}
.hero {
width:100%;
height:0;
background-size:100%;
background:url(http://img97.imageshack.us/img97/3410/photo2ue.jpg) no-repeat;
padding-bottom:75%;
}
Also that was one messy desk i had lol.
You can also use a little jQuery. I believe the advantage is that it is a semantically valid fix, so the next guy who edits your code might have an easier time understanding what's going on.
// Maintain aspect ratio of #my_div
// Set aspect ratio of #my_div
var aspect_ratio = 0.8;
// Store the jQuery object for future reference
var $my_div = jQuery("#my_div");
// Within your document ready function,
// Do an initial resize of #my_div
$(document).ready(function(){
$my_div.height( $my_div.width() * aspect_ratio );
});
// Resize #my_div on browser resize
jQuery(window).resize(function() {
$my_div.height( $my_div.width() * aspect_ratio );
});
while a non-fixed width (e.g. 100%) takes all the container's width, the height of an element when not set to a fixed size will stretch to accomodate any in-flow content (including padding, margin, borders...)
if you can use an <img> tag instead of a background image, you can then apply max-width:100% to the image itself and it will scale to fit the container - the browser will take care of resizing its height to keep the aspect ratio consistent - however replacing a css background with an image tag is not always possible or the best option in terms of semantics and/or any layout issues you may face.
Working very well without a set height or img using the new relative font sizing units, e.g. vm (http://www.sitepoint.com/new-css3-relative-font-size/).
http://www.juliabailey.com/
This website has fluid design and it's working very nicely.
http://goo.gl/j6snn
This is my website. Fluid view is depending on width. Therefore, when I get my browser bigger width gets bigger as well as height. But the problem is height is too big and creating scrollbar which I don't want. I don't what scrollbar to appear on my page. I think the best way would be fluid view depending on height so it always fits in browser no matter your browser is 800x600 or 1600x1200. How can I do it ?
Here is my wrapper code;
#wrapper {
width:auto;
height:auto;
width:80%;
min-width:550px;
max-width:1150px;
margin:50px auto 0 auto;
z-index:100;
}
use percentages for the properties of your classes. for example:
wrapper {
width: 92%;
}
content {
width: 73%;
}
sidebar {
width: 25%
}
type thing OR
you can also use javascript to detect what you need and then change the implementation dynamically. kind of like this
function dynamicLayout(){ var browserWidth = getBrowserWidth();
// Narrow CSS rules
if (browserWidth < 640){ changeLayout("narrow"); }
// Normal (default) CSS rules
if ((browserWidth >= 640) && (browserWidth <= 960)){ changeLayout("default"); }
// Wide CSS rules
if (browserWidth > 960){ changeLayout("wide"); } }
in your example, you have a min width property, which means if it's less then that you will have scroll bars. if you dont want scroll bars, you can't set any static value to any layout element, so it may flex to the browser window size.
Use min-height and max-height, so the browser stops the zooming when reaching them. You sample's scrollbar is always visible, even when it's "empty", and that's why it doesn't jump when resizing.
I'm trying to make a div fill up the page, but it seems to be only as long as the content I put in it. This is my css code:
.myDiv
{
height: 30%;
}
What can I do to make it be that height whether the div is empty or has some content? (The content won't extend past the height I set here).
You are using percentages so the height of the div depends directly on its parent. Make sure the parent has a height. If the direct parent is the body then:
body{
height:100%;
}
If you know the exact height you want you for the div you should be using pixels like height:300px;
You could do something like this. (I know you didn't ask about jQuery... but it is another option)
var height = $(document).height();
$('#myDiv').css('height', height);
http://jsfiddle.net/jasongennaro/pNHzE/1/