Is there a way to set a CSS element (div in this case) to a certain height, unless the content in it causes it to be larger? I have a CSS layout, and I want my "content" div to be at least 600px high, but is there's 700px of content, allow it to be extended.
div {
min-height: 600px;
}
Related
I am trying to insert full width hero image. Problem is based on the original height of the image, it's getting too short on mobile device.
Large Screen:
Mobile Screen:
Basically, I wanted little bit bigger height than the calculated height on mobile screen. So, I thought it would be good if I apply a min-height to the image.
So, I have added this:
img {
min-height: 300px;
}
Surely, it's not the way.
How to fix this?
Code Demo
You need to wrap the img block in the parent block. Then in the parent block to set the minimum height, and in the img block to specify width of 100%. This will preserve the aspect ratio of the image, and its height will be either greater or as the parent, but not less than that set in the parent block. Of course, the parent block must inherit the entire screen width from its parent block or explicitly have a width of 100%. For example:
.block__image {
/*width: 100%;*/
min-height: 300px;
}
.block__image img {
width: 100%;
}
<div class="block__image">
<img src="https://i.stack.imgur.com/U1tXC.jpg" alt="image error">
</div>
I have some stretchable elements on my HTML page.
With this CSS
.stretchable-element {
height: 25%;
}
As the height of the browser window increases, the stretchable element gets taller. As the height of the browser window decreases, the stretchable element gets shorter. But when the browser window gets too short, the content in the stretchable element will overflow. I have multiple stretchable elements so I can't simply set a fixed min-width. What I want to achieve is something like this:
.stretchable-element {
height: 25%;
min-height: just tall enough so the text inside this element will not overflow
}
Basically, when the browser window is made shorter on the y-axis, the stretchable elements will decrease in height until they each hit a point where they're just big enough to fit the content that they each contain, and they won't get any shorter after that.
I think you'll need to do this with javascript. Basically when the window loads, you'll need to find the height of all the contents for each stretchable-element. Then you just need to set each stretchable-element's min-height to that value using javascript.
I have a container div (width:100%) containing 3 more divs arranged along the container (of widths 33.3% each).
On decreasing the width of the window, all the images start to overlap. The text as well. How can I stop this?
I see that stack overflow has a mechanism which prevents the user to decrease width beyond a certain point.
You should use the css class min-width.
Eg:
.myclass {
min-width: 100px;
}
need to set 100% width to the image
img.class-name {
max-width: 100%;
width:100%;
}
I have a dynamic-height container (its height is specified in relative measurements), inside of it, two elements - a header, and an img, e.g.:
<div class="item">
<header><h1>Title</h1></header>
<img ... />
</div>
I want the image to show in its entirety. Its css is set with height:100% .
Because of the height that the header takes, the image is clipped a little bit below (it is has an hidden overflown edge), where I want its height to auto adjust (become smaller) to fit inside the container.
There is a solution, where I use calc(100%-[height of header]) for the height of the image, but since calc is not supported in all browsers I was wondering if there is a different more supported solution for this.
Here is a jsfiddle:
http://jsfiddle.net/7xLo7mr6/
(Apply the class fix to the container to apply the calc fix)
Perhaps CSS flex could be your solution for this one:
http://jsfiddle.net/7xLo7mr6/9/
Using flex-direction: column; and applying a max-width to the container (allowing the image to fill in the rest of the height after the header text while not stretching the width) could potentially solve your issue, but might cause you more troubles depending on what you're ultimately after.
Another option: http://jsfiddle.net/7xLo7mr6/11/
apply height: 7%; to the header and height: 93%; to the image
Make the clipping happen at the top of the image instead of the bottom:
http://jsfiddle.net/7xLo7mr6/13/
Apply position: absolute; to the header, give it a background: white; and width: 100%;, then apply a position: relative; to the container so that the header applies a width 100% to the container and not the body.
If you just want the image to shrink when its container shrinks, you can give it a max-width of 100%, and that will stop your image from growing so large it exceeds its container.
.item img {
height: 100%;
max-width: 100%;
}
It might be important to note that declaring height: 100% does not make elements 100% of the height of their containers, it makes them 100% of their own intrinsic height. The heights of elements are determined by their content, not the other way around. Read a full explanation here: https://stackoverflow.com/a/5658062/4504641.
http://jsfiddle.net/ingridly/337wrgj8/1/
There is an inline-block element with 100% height and width :
<div style="width: 100%; height: 100%; background: red; display: inline-block">Y</div>
Why doesn't this div take up whole height, but takes up full width?
An auto width on a block box causes it to be as wide as its containing block allows. An auto height, on the other hand, causes it to only be as tall as its contents.
The block box in question is body, and by extension, html. Neither element has an intrinsic height (even though the initial containing block does), so the height of both elements defaults to auto.
The 100% width and height of the inline-block respect the used width and height of its containing block, which in this case is body. If you specify any arbitrary height on body, or height: 100% on both html, body, then the inline-block will be adjusted accordingly.
Note that because an inline-block is essentially the same as a block box except laid inline, percentage width and height are calculated the same way as if the element were block-level.
It takes height of its parent
try:
html,body {
height: 100%;
}
That's because a div by default takes full width, unless specified otherwise.
Making it inline-block, just allows it to be inline, but preserving its block nature such as setting width and height, top and bottom margins and paddings.
And the height of every element(not-null) in html markup is same as height of a line.. which can be changed by line-height property.
And if you wish it to take all-height, follow the above answers.
Because your html and body tags don't take full height.
Unless specified otherwise, block elements take full width, but only as much height as needed - it is only natural, since HTML was originally meant as a way to format text documents. You wouldn't want, say, a paragraph to take the full window height.
You must set their height to 100% to get it work - stretch them to the window height:
html, body {
margin: 0;
padding:0;
height:100%;
}
http://jsfiddle.net/gdyLs/1/
You need to specify height to html and body then only that div will take 100% height
html, body{
height: 100%;
}