I have an image. This image should have 100% height. So, in my CSS, I defined height: 100%. The problem is the respective width, since this image is a panorama, it will certainly exceed the viewport dimensions. I don't want this to happen. Is there a way like overflow: hidden to completely hide the portion of the image after the maximum viewport width.
HTML
<div id="image">
<img src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg"/>
</div>
CSS
#image {
height: 100%;
}
Here's the fiddle as well.
http://jsfiddle.net/AH3Hd/
Add this CSS to your div. You need to give it a width or it will just auto adjust to whatever its contents are.
div {
width:100%;
overflow:hidden;
}
http://jsfiddle.net/AH3Hd/4/
To use overflow:hidden;, you need to specify a width to the div, otherwise the browser will not know when to hide. I edited your fiddle to show that:
#image {
height: 100%;
width: 100%;
overflow: hidden;
}
http://jsfiddle.net/AH3Hd/6/
You could do something like this:
#image {
overflow: hidden;
height:300px; // Depends on the size you want
width:300px;
}
#image img{
height:100%;
}
Here's the fiddle: http://jsfiddle.net/jwvanveelen/AH3Hd/7/
Related
Suppose I have a page and in that page, I have a div named #bar:
In the style tag, I'll write something like:
<style>
#bar {
width: 100px;
}
</style>
I want to write CSS so that the div adjust its height automatically according to the page's height. I'll use the same div in different pages and it'll adjust its height automatically according to the page it is in. Is there any way to do that?
Let me be more specific. Suppose my code is like this:
<style>
#example{
float:right;
}
#bar {
width: 100px;
height:100%;
border: 1px solid red;
box-sizing: border-box
}
</style>
<div id="example"><p>This is page content</p><p>This is page content</p></div>
<div id="bar"></div>
Now, I'll copy and paste the paragraph something like hundred times, so the size of my page will increase. I want my div to automatically adjust its height after I copy-paste the paragraph a hundred times, so that the div will cover top to bottom of my page. Is there any way to do this?
Provide height: 100% to .bar.
.bar {
height: 100%;
}
Also, a thing to note here is you should give height: 100% to the html and the body.
html, body {
height: 100%;
}
You could use position:absolute; as follows:
#bar {
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
}
For a pure CSS solution, you can use #media to change the div's size based on window size:
#media screen and (max-height: 600px) {
#bar {
width: 90%;
height: 90%;
overflow: hidden;
}
}
This will allow you to set exact heights based on the window's parameters.
Here is a JSFiddle Demo.
I have col-sm-1 and col-sm-9 and col-sm-3. I want them to have a full height. When I do height:100%, the height goes full only when I have contents inside them. I want the height to be full even when it's just empty.
So I just did height:2000px; background-color:grey; and now this looks like the way I want. However even a beginner like me know this isn't the best way to do it.
Am I allowed to go height:2000px; and deal with it?
Just use the Flexbox.
Assign their parent a class .flexbox, set the CSS as below.
.flexbox .col {
flex: 1;
}
The height 100% fills the space even if the content isn't there but it may be not working just due to parent container height is not set. So, for this you need to define the parent element height in fixed pixel or set 100% height parent-hierarchy way. In short you can fix this problem by just setting the height 100% to the html,body:
html,body{
height: 100%;
}
.your_element{
height: 100%;
}
And here is a demo:
html,body{
height: 100%;
}
div{
height: 100%;
background-color: red;
}
<div>some content</div>
I am using the following code in html to display and image. I want it to 'scale to fill' where the height is the browser height and the width scales based on the height. I want to hide all overflow to prevent the div that follows from losing its content. This is the code I am trying to use:
<div id="image1">
<img src="http://googledrive.com/host/0By-qb7dZ_m5feE94MkcwSWxLckU"/>
<style>
#image1{
overflow: hidden;
width: auto
height: 100vh;
}
</style>
</div>
If anyone has any ideas then that would be great.
Thanks
Change the width to 100% and the height to auto. Then redefine the img style and move the two properties there.
#image1 {
overflow: hidden;
}
img {
width: 100%;
height: auto;
}
I dont know if i exactly know what you mean, but try to set your width to 100%, that should cover the div.
Remove the overflow by moving overflow: hidden; to a redefined body style.
For the 'scale to fill' part of your problem, add img to your #image1 style so that the image is affected by the style and not the div itself. Set the width to 100% and the height to auto so that the image width is the same as the browser's, and the image height adjusts automatically and proportionally on window resize.
body {
overflow: hidden;
}
#image1 img {
width: 100%;
height: auto;
}
I have this layout:
http://jsfiddle.net/spadez/BN9KJ/2/
It works by having an optional left column. How can I get the column colour extend all the way down the page even if there isn't enough content to fill it.
I was thinking it would be something like this:
height: auto;
But that doesn't seem to work
add the following css
html,body{
height:100%;
}
and then apply height: 100% for the divs
working fiddle
The Logic: setting the height of the body,html element,because it is the parent element..!!
BUT why should we give both html and body --> height:100% ??
the answer is https://stackoverflow.com/a/6654996/2967572
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.
just give
#left_column {
width: 250px;
background-color: orange;
float: left;
height:100%; //added
}
along with
html,body{
height:100%;
}
DEMO
BUT
However the content of body will probably need to change dynamically.
Setting min-height to 100% will accomplish this goal.
it will be good alternative to give min-height
#left_column {
width: 250px;
background-color: orange;
float: left;
min-height:100%; //added
}
DEMO with Min-height
I've been told to use position: relative but when I go to view it in the browser it doesn't show up, please could you tell me why?
Here is my code:
HTML:
<div id="box"></div>
CSS:
#box
{
position: relative;
height: 20%;
width: 20%;
background: #366;
}
Just add html, body {height:100%} to your CSS-File.
http://jsfiddle.net/LGJH4/
The problem is with the CSS calculation. By default HTML page has no height.
So, your 20% for the height is just 0 as it is relative to HTML which has 0 height.
The option for you is either propose pixel height for #div or give a height to the whole document.
#box {
height:100px;
}
or
html,body {
height: 100%;
}
/*** Write your css here ***/
Here is a fiddle, http://jsfiddle.net/Pj6Ra/1/
Generally, without a parent element with a defined height, a % height will result in 0px. You'll need to use a different height unit, such as px or em. E.g.
#box {
height:200px;
}
Interestingly, you could use padding-bottom: 20%, although that wouldn't give you the result you expect. The height is then 20% of the width of the viewport, rather than of the height.
Try this code:
DEMO
html,body
{
height:100%;
}