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/
Related
I can't make the header image's height bigger. I found some CSS that made the container height bigger. But every time I change the photo out, it is still the original height: 75px;.
.container {
width:100%;
height:200px;
float:left;
margin-top:2px;
}
thml
html
What am I doing wrong?
From the screenshot i did not see any image element. If you want the image to to follow have a fixed height, you can set a height to the image itself, but if you want the image to follow the container's height, then u need to give a height to the direct container of the image, at the same time give a height to the image, 100% if you want the image to follow the height of the container.
From the code you provided. your .container has a height of 200px. If the image is inside this container, and you wish to make the image exactly 200px as the .container, then you need to add .container img{height:100%} to the image.
Try this CSS rule:
header {
min-height: 50% !important;
}
There should be something below the image that is blocking your height.
Make sure to check from the inspect element
I've created a simple image fader using the technique in the answer from How to make HTML/CSS slideshow background fade?
However this solution requires the images to be of a fixed size. Once I add dynamic width (width=100%), the images overlay the text.
http://jsfiddle.net/2kkHH/340/
.fadein {
position:relative;
width:100%;
}
Any suggestions how to have width=100% and at the same time avoid the images overlaying the text?
You can set the text to be positioned:
http://jsfiddle.net/jonigiuro/2kkHH/346/
p {
position: absolute;
}
Also, text should always be contained in some tag (p, span, etc..)
You have to give a fixed height and width to the container div. Unless that is done, how will your images be 100%? I mean 100% of what? The parent of images is div and hence 100% of that div.
See this updated fiddle: http://jsfiddle.net/2kkHH/350/
If you make your div 100%, then 100% of what? In this case it will take 100% of your page.
Set the position of .fadein img also relative.
.fadein img {
position:relative;
left:0;
top:0;
}
You can insert these two lines of code
$('.fadein img:gt(0)').hide();
var h = $('.fadein :first-child').height(); // line to add 1
$('.fadein').height(h); // line to add 2
and everything will start working - http://jsfiddle.net/5Ugkr/
The reason is that container div does not deduce its height from its absolute positioned img children, so you must set the height 'manually'.
I currently have two columns, with another column in-between them. What I want is to have the left and right columns extend in height as the centre column has more content added to it.
Something to note is that I cannot set an exact height for the parent div and then have the left and right columns set to "height: 100%". This is because there could be only a small amount of content in the centre column, or a lot.
It looks like you're going to have to implement a Javascript approach. The way I would go about it would be to grab the height of .legs then apply it to .flight_no and .price.
The only other option I can think of would be to "fake it" by giving .flight a background image that would include however your left and right columns are stylistically different, then repeat-y in your CSS. If you do that, the sidebars wouldn't actually have to span the same height.
Something like this, using jQuery, will dynamically set your sidebars to the height of the middle column.
$(document).ready(function() {
$(".flight_no, .price").css("height", $(".legs").height());
});
Edit:
Times have changed -- jQuery is not the juggernaut it once was, and we welcomed Flexbox to the world. See this SO page for column-based solutions:
CSS - Equal Height Columns?
Extending div to correct height, or lets say 100% height of the container, You have to chain height:100% up to the container with fixed height or to the body with another height: 100%;. On the long run, you will probably require this solution.
Since there is no fixed height, I used height: 100% and chained up to the body an html.
body, html { height: 100%; }
.flight
{
float: right;
border: 1px solid green;
height: 100%;
}
Demo
TO give exact height of container to the sidebars, you either have to use fixed height or use javascript.
is it possible to have a div (or other element) resize its height in relation to its width (or the other way around) using CSS? basically, to get it to behave the way an image with a percentage width resizes proportionally as the browser window is resized?
If you want to set a width or height relative to a .parent element and you know the aspect ratio that needs to be maintained, you can do something like this:
.parent{
width: 150px;
}
.child{
width: 100%;
padding-top: 50%; /* outer height will be 75px (150px*0.5) */
}
Note that you are relying on having a height (or width) of 0 and defining it based on the padding only. So, if you want to add any content you will probably need to wrap it within an absolutely positioned div within .child. See this fiddle for an example
Look at this related question. In short: No, it's not possible using only CSS
I'm trying to make a div assume 100% of it's parent div. The parent div acts as a page wrapper, so it's already assuming 100% of the page width. I've tried adding width: 100%, but this did not seem to work. I'm a little baffled, because this seems like a relatively simply thing to do.
Don't specify a width at all. For a div element (or any block level element for that matter), this will make it assume 100% width regardless what padding/margin settings it has set.
Depending on the box model, explicitly setting 100% width can actually make the element too wide because paddings are calculated into it.
If this doesn't work, there is some other CSS setting interfering and you need to show more of your layout and HTML code.
display: block;
width: auto;
Should work for you.
You need to show more of your existing css code as normally, a div takes by default the whole space available to it, provided it has some content.
Other than that, make sure you set margin and padding of the parent div to 0.
.parent{
margin:0;
padding:0;
overflow:auto;
}
.child{
margin:0;
padding:0;
}