I've been playing with front-end web design the past couple of days, mainly using floats/clearfix to position my content. I've been marking up the width of the content using % and that has worked perfectly.
However, if I try to define the height as a percentage of the overall page, it fails to work, more accurately it seems to just wrap around what ever content is there and I have to define the height as a px value.
Is there a reason for this? Is there a workaround where I can use a percentage value and it actually divides up the page?
To define the property height in % you need a previous definition on the parent height. Then if you have a parent with fixed height on px you can work with %; but if you want to work % in relation to the window or other % values you need to set a value for all parents.
Then if you want to work with the window % you need this:
HTML like:
<body>
<div id="container">My div with 100% height</div>
</body>
CSS like:
/*Need to set all parents to 100%*/
html, body {
height:100%;
}
/*Then set the container*/
#container {
height:100%;
}
please try this:
give the HTML tag in CSS 100% and then you should try to set the body element in CSS to
display:block;
and give it
min-height:100%
see this topic too:
min-height does not work with body
br paulq
Related
I am creating a simple portfolio webpage for an photographer. He wants to show his pictures in the web. So the images should be responsive. So I wrote following code to the image class:
img {
max-width: 75%;
height: auto;
}
So it fits the image to the width of any screen, but I want to show the image in full height. So if the image has a bigger height, the user have to scroll down to see the whole image. So how should I set the height, so the whole image whould be shown immediately?
With regards,
Andrej
did you try reversing the same, as in, try giving it a height, and leave the width to auto..!!!
Because u just need to set either of the two, and the other adjusts accordingly...
Simple:
max-height: 100%; /* or a bit less */
But note what the docs say:
The <percentage> is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as none.
Ok, I have found a solution.
I just set the max-height with the vh units (viewport height).
Thx for your help.
try this way: img{max-width:100%; max-height:100%;}
Consider the basic HTML below:
<body>
Random HTML content
<div class="container">
<!--Some content loaded via ajax or the like -->
</div>
Other random HTML content
</body>
I want the width of the "container" div to be the MAXIMUM of three potential values:
100% of the window
1024px (for best visual appearance)
the width of the content
I have been able to accomplish #1 and #2 by using the CSS properties width:100% and min-width:1024px. I can also accomplish #2 and #3 by setting display:inline-block and min-width:1024px. However, I haven't been able to get all three: if I add in the width:100% to the display and min-width properties, it overrides the child content sizing effect of the inline-block display and gives me only 100% width, even when that means the content overflows.
I know I can hide overflow or give the div itself scrollbars, but what I want is for the div to expand as needed, or to the full width of the window, whichever is greater - but never narrower than 1024px.
Edit: Note that the content loaded in the div may be less than 1024px. The div itself, however, should never be less than that, as it would no longer blend nicely with the look and feel of the rest of the page.
You can achieve this by adding another div on top of first one:
<div class="container2">
<div class="container">
</div>
</div>
css:
.container2{min-width:100%; display:inline-block;}
.container{min-width:1024px; width:100%;}
http://jsfiddle.net/om10t3gn/4/
You can augment your second proposal with a virtual pseudo-element to achieve the dimensions you want without using javascript
.container {
min-width: 1024px;
display: inline-block;
}
.container::before {
width: 100vw;
display: block;
content: ' ';
}
Basically, it's adding a zero-height element to the top of your container that has the same width as your viewport, which is 100% of the width of <body>. So it adds #1 to your existing solution that already achieves #2 and #3.
And it doesn't use any javascript, and will stay correct with resizes.
I am not very skilled with CSS, but I think I have a solution for this problem.
To have a max-width in pixels and a max-with in percent at the same time, you could first calculate the width with the clamp-method (this includes the first of your two max-widths) and then add a normal max-width. The clamp-method is relatively new and not supported by old browsers unfortunately.
<div class='container'></div>
CSS:
.container{
width:clamp(400px,250px + 25vw,100%);
max-width:700px;
}
This should set a max-width both at 100% and 700px.
I have tested it on a notebook with Firefox and Chrome.
Use javascript to pick the largest value, use jQuery to assign that value to the width of the container div.
var window_width = $(window).width();
var container_width = $('.container').width();
var default_width = 1024px;
var max_width = Math.max(window_width, container_width, default_widht);
$('.container').css('width', max_width);
I do not understand the basic concept of giving body and html a height of 100%. Why do we give 100% to our parent?
<body style="height:100%"> and the <html style="height:100%">.
What happens when I give 100% height to my html and body, and why do we give it?
Giving 100% height to body and html isn't an must-do. But assuming you want to use percentage values on your site you have to assign 100% height to both.
Why?
Refering to Mozilla Developer Network:
Many CSS properties can take percentage values, often to define sizes in terms of parent objects.
That means: If you assign height:20% to header (assuming html>body>header), the browser will calculate that 20% in terms of the parent (body) and the height of the body in terms of its parent (html).
But height has an initial value of auto. When you take a look into the Developer Tools of Chrome etc., you'll see that the body has a calculated height of 0 (zero) by default. Consequently the headers height isn't calculated correctly.
That's why it makes sense to define a line like the following in a reset.css or something alike:
html,
body {
height:100%;
width:100%;
}
Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have it's height set as well.
However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.
Look here
Make body have 100% of the browser height
Trouble setting container as a percentage
Yes, I know, the parent of object has to have extremely set height in pixels.
It's a DIV and it's child of <body> and I really need to have it set with percent height.
Is there way to bypass it, except defining ultimate height in <body> by pixels?
Setting up the body height within the .css file to 100%.
Then set the containing elements to a percentage of that body height.
<html>
<head>
<style type="text/css">
div {
border:1px solid #000;
min-width: 50%;
}
</style>
</head>
<body>
<div>This is some text. </div>
</body>
</html>
I believe the div should be 50 percent of the page, unless, for some reason, the text inside the div makes it larger. However, the border around the div stretches across the entire page width. This occurs in both IE and Firefox.
Suggestions?
I believe the div should be 50 percent of the page, unless, for some reason, the text inside the div makes it larger.
min-width does not set a minimum starting width from which your block will grow; rather it limits how far the block can shrink.
In min-width: 50%;, the 50% is in reference to the containing block. I've never used percentages with min-width, but I find it can be useful with other units. For example if I have a block (like a column of text) that I want to be full width, but I don't ever want it to go below a minimum width, I could use something like {width: 100%; min-width: 250px;}.
Note the caveats on IE support mentioned by others.
If you provide absolute positioning to the element, it will be 50% in Firefox. However, IE doesn't like the min-width or min-height attributes, so you will have to define width as 50% also for it to work in IE.
Without min-width, your div will take whole page width, that is how display:block elements behave. Adding min-width cannot make it smaller.
Changing display property to absolute or float property to left will make the element to shrink to fit contents. Then, min-width start to make sense.
To add to what Chris Serra said, in IE < 7 (and in 7? I can't keep track these days, but definitely < 8), width behaves exactly like min-width is supposed to behave.
You are telling it that the minimum width is 50%. Since there is nothing else taking up the space, it will take all of it (except for margins).
If you give it a max-width of say 75%, firefox should constrain it to that. IE6 will still ignore it.
As David Kolar already said, many of us typically do not use percentages for min-width.
You may want to try an IE specific style-sheet and include and expression like:
print("width:expression(document.body.clientWidth < 1024? "50%" : "100%");");
This will change the width setting based on the width of the browser window at load time. I personally like to use px as the unit measurement, but you need to try it with your specific setup.