This question already has an answer here:
Maintain aspect ratio of a div according to height [duplicate]
(1 answer)
Closed 8 years ago.
Is it possible to make a square div with css based on its height in pixels?
This question is similar to this one (marked as duplicate), but in this case I want height to be set in pixel or any unit.
When based on width, there is a simple solution :
.mydiv {
height: 0;
padding-bottom: 100%;
}
But here 'height follows width'. I'm looking for solution where 'width follows height'. So if I would set height to 300px, width would follow it.
For now I'm doing it using javascript, updating on window resize. But I would like to find a CSS solution, thats why I'm not looking for a javascript solution
Here is a playground
You could use the new viewport size units
JSfiddle
CSS
html,body {
height: 100%;
margin: 0;
}
div {
background: red;
height: 100vh;
max-width:100vh;
box-sizing: border-box;
}
Support is effectively IE9 and up
Related
This question already has answers here:
React force background color full height
(3 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 3 years ago.
I am trying to set background color to the pages in my React app. I want to set a background color extending to the full page length and width but I cannot do that, for forms or tables extending beyond, I set height/width or min-height/min-width to 100% and I get the result for larger contents but for smaller contents,I get this:
I want to have the entire page of blue color.
This is my css file
.body
{
margin:0px 0px 0px 0px;
background-color:#4086ef;
padding:10px;
height:100%;
width:100%;
}
If I set height to 100vh, I get the undesired result but with contents going beyond the page.
(Content rendering is dynamic so I don't know when the content will go beyond and when not).
EDIT:
The table doesn't squeeze along when I compress the window and neither does the overflowing part follow the background color but the height follows the background color even when scrolled.
You just need to add height:100vh.So that it will cover your whole screen.
Try with this
* {
box-sizing: border-box;
}
body {
margin: 0;
}
div {
background: red;
color: white;
min-height: 100vh;
padding: 10px;
}
<div>
Test
</div>
You can use:
height: 100% !important;
This question already has answers here:
How to use css media queries correctly for responsive design
(2 answers)
Closed 6 years ago.
I've seen on a few websites in the past where a background image on a big DIV (say 100vh and 100vw) will stretch as the browser grows, but when a certain lower threshold is met (e.g. 800px), the background image doesn't stay at 100%, but starts clipping the background image instead.
I can't find those pages anymore now that I need to do it myself. CSS solution?
You can still use 100vh and 100vw something like below -
body {
margin:0; /* reset any browser-default margins */
height:100vh;
width:100vw;
}
img {
height: 100vh;
width: 100vw;
}
<body>
<img src="https://www.gstatic.com/webp/gallery3/1.png" />
</body>
Hope this will help you in some way (y).
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have this blogspot blog: sourcewing.blogspot.com
Now if you go to drawings tab, you'll notice the electric bulb image is not aligned center of the post. What I want to say is that it is taking its original width and height. If the width would be 1200px, it would go out of the tbody (Please check the HTML of this image).
What I want is that it should shrink automatically (maintaining the proportions), according to the width of div class="post-body entry-content"... element (you'd find by inspect element). This should apply on the all images that have more width than this div.
Also, I would like to know why isn't it automatically shrinking, while the text is automatically aligned?
Remove the fixed height and width attributes from the img element.
You can then add a class eg .auto-contain or whatever with the following css:
.auto-contain {
display: block;
height: auto;
max-width: 100%;
width: 100%;
}
This will force the image to always have the same width as the container, but the height will grow in proportion.
So you are missing a few things.
height: auto;
max-width: 100%;
box-sizing: border-box;
This will achieve exactly what you are after.
Just to explain:
height: auto; - This will make sure your picture remains in proportion.
max-width: 100%; - Your image will behave responsively but wont break it's own natural sizing.
box-sizing: border-box; - Because you have padding you don't want to break the width this will keep padding but not break out of your container.
First remove the width and height attribute from your img tag.
To solve the problem :
img {
height: 90%;
width: 90%;
}
if you set height and width 100% normally your image would be as big as the parent. But in your case this does not work. 90% however looks better.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I saw somewhere that it wasn't recommended to use height and use padding instead, why that? The height and the padding produces the same results - at least in my trials -... is there a reason for me be to be using padding only instead of height?
To answer your question - of course you can use height in responsive websites without a problem.
I think where you may have read about using padding in place of height is for keeping the aspect ratio of an element the same since percentage based padding is relative to the width of the element and percentage based height is relative to it's container.
A common use case for this is embedding a YouTube video in a responsive wesbite.
HTML
<div class="video-container">
<iframe src="//www.youtube.com/embed/k_d5jWvBirU?wmode=opaque&rel=0&showinfo=0&modestbranding=1&controls=2&autohide=1" frameborder="0" allowfullscreen=""></iframe>
</div>
CSS
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
background: #000;
}
.video-container iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
Fiddle here: http://jsfiddle.net/84wm08k7/
As you can see the height of the video-container is set to 0 and the padding-bottom is set to 56.25%. This restricts this element to being a 16:9 aspect ratio for video and is responsive.
well to start if you use padding then the page will stretch itself to fit the screen leaving the given amount of border (padding). If you use a specified height (in pixels per say) the page will always be the same height regardless the resolution of the screen. If you are using height as a percentage or some analogous value, than it shouldn't matter other than that the amount of space (padding) will vary depending on the screen.
It depends on what you're doing. For a lot of my work, I'll set a min-height or max-height that way the element grows or shrinks depending on the content.
Padding would work as well, if for instance you have an element with text that would be centered vertically, you can use padding to control height as well. It's all up to the site design, and what you're trying to accomplish.
this is a code example you can check w3schools.com for further information, I've chosen the example in which you can manipulate the dom
function myFunction() {
document.getElementById("myBtn").style.height = "50px";
}
<!DOCTYPE html>
<html>
<body>
<button type="button" id="myBtn" onclick="myFunction()">Change the height of this button</button>
</body>
</html>
This question already has answers here:
Applying a background to <html> and/or <body>
(2 answers)
Closed 8 years ago.
So I have this very basic question that I was wondering about. I just set a background through css with
body {
width: 960px;
margin: 0 auto;
background-image: url("../img/background2.jpg");
}
Why is the image showing up at both sides as well and not only in the center 960 pixels? If I put my background image in a navigation class selector, it does work:
.container {
background: #099;
}
Why is that? Shouldn't the body image be restricted by the width that I set?
Here is my code: http://jsfiddle.net/nB22j/
Also, is there any use for the .container selector if I can just put everything in body {} ? (In this case I do want the background to fill the full browser so I can put my background in body {} but I'm just wondering...) I'm not sure anymore why I added the container div in the first place. Any reason for it to exist?
Because, if you set no background to HTML , body's background is applied to HTML too.
Just add this : DEMO
html {
background:#fff;/* or any color/image/gradient you want */
}
and your background for body will only be drawn where body stands.
See W3C for more infos.