I have an element with 100% height. If there are a lot of blocks, then they go beyond it.
jsfiddle example: http://jsfiddle.net/yPqKa/
How to fix it?
Thanks in advance.
CSS:
html, body {
height: 100%;
width: 100%;
}
.content-background {
background-color: #000;
height: 100%;
width: 100%;
}
.content {
background-color: #eee;
height: 50px;
width: 100%;
margin-top: 60px;
}
Set a min-height on the body :
html {
height: 100%;
width: 100%;
}
body{
min-height:100%;
}
DEMO
This will allow the body to adapt it's height to the overflowing content.
The problem is that you have set the height of the html and body elements to 100% of their container, which restricts them to be smaller than the elements they contain. If you remove the height: 100%; from the second line, it will work.
Related
I am trying to make a banner for a webpage. I wanted create a container that only look up 20% of the page height-wise and then the image within it would take up 100% on the container. However, the image just ends up taking up all of the page and not responding to % changes.
Html code:
<div class="banner">
<img src="img/header.jpg">
</div>
CSS code:
.banner {
width: 100%;
height: 20%;
}
.banner img {
height : 100%;
width: 100%;
}
if you dont want to use a floating banner, you might consider to change your styling as this:
.banner {
width: 100%;
height: 20vh;
}
vh = view height. https://www.w3schools.com/cssref/css_units.asp.
and if you want floating banner to follow as your page scroll, use this:
.banner {
width: 100%;
height: 20vh;
position:fixed;
}
You can use vh instead of percentage for banner. 1vh = 1%
.banner {
width: 100%;
height: 20vh;
}
.banner img {
height : 100%;
width: 100%;
}
<div class="banner">
<img src="http://via.placeholder.com/350x150">
</div>
Instead of using the <img> tag you can set the image as the background of your container.
.banner{
background-image: url("/img/header.jpg");
}
Your .banner is not taking the height 20% from css. The reason is it does not have a parent element having height set. So here I have added height: 100% to html and body. Try the below example.
html,body{
height: 100%;
}
.banner {
width: 100%;
height: 20%;
background: green;
font-size: 0;
}
.banner img {
height : 100%;
width: 100%;
}
<div class="banner">
<img src="https://cdn.pixabay.com/photo/2015/12/13/09/42/banner-1090835_960_720.jpg">
</div>
<style>
html, body {
height: 100%;
}
img.one {
height: auto;
width: auto;
}
img.two {
height: 50%;
width: 50%;
}
</style>
In the css above, when I take out the height property of body and html something seems to happen but I don't understand what.
What is the purpose of setting the height to 100% for body and html?
Add border to see the differences.
html, body {
height: 100%; /* Ex: Change it 100% to %75 */
border: 2px solid red;
}
When you done you can remove the line.
If you remove the height from html, body then img.two { height: 50%; } has no reference height any more. 50% of what should it then be?
I have done this many times before but it doesn't seem to work now for whatever reason. I want the image to be the full the width of the container but it doesn't. Any ideas?
jsFiddle: http://jsfiddle.net/Lqffk1ak/
Code:
img {
max-width: 100%;
max-height: 100%;
}
div {
background: #ccc;
}
<div>
<img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width">
</div>
Just add width:100% to img
img {
width:100%
}
Looking at your class, what you should add is some CSS on the full-width class to make the img width 100%.
This way, only the images set as "full-width" will be forced 100%. The other one will keep the max-width rule of 100%, but won't be resized if they are smaller.
img {
max-width: 100%;
max-height: 100%;
}
.full-width {
width: 100%;
}
div {
background: #ccc;
}
<div>
<img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width">
</div>
Just make your image width 100%. Even you resize your container image will fit on it.
img{
width:100%;
}
You can check the updated fiddle here
Change the css :
div {
height: 100%;
}
img {
width: 100%;
min-height: 100%;
}
I know this isn't directly an answer to your question but generally speaking, upscaled images look quite nasty. A way people get past this is to have the image centered and then add a blurred version behind it.
Like this:
body {
margin: 0;
}
.image {
position: relative;
text-align: center;
overflow: hidden;
font-size: 0px;
}
.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg');
background-size: cover;
z-index: -1;
}
.blur {
filter: blur(10px);
}
<div class="image">
<div class="background-image blur"></div>
<img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width">
</div>
I hope you find this helpful.
Because your Image is has 600px; height, and the you have set max-width:100%. So max-width property will only work when the parent dive will be smaller then 600px;.
To make image to the containing div, you have to give set image's property 100%; that is .full-width {width: 100%;}
Ok really simple question, I want to make a section 100% height of the viewport, I understand that the parent element needs to have a defined height but it still doesn't work for me. Help me understand if I'm overlooking something!
html {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
}
section {
width: 100%;
height: 100%;
background:red;
}
http://jsfiddle.net/SzBM5/
use html, body{ height: 100%; }
demo
You have to set the height 100% at the BODY and the HTML.
body, html {
height: 100%;
}
http://jsfiddle.net/pGa6t/
Your need to set height:100% for body also.
Fiddle
Use This Css DEMO HERE
html, body {
margin: 0px;
padding: 0px;
height:100%;
}
section {
width: 100%;
height: 100%;
background:red;
}
I have setup a table within a DIV tag at the following link:
http://jsfiddle.net/yVDXQ/122/
html {
height: 100%;
}
.container {
background: yellow;
min-height: 100%;
width: 50%;
margin: 0 auto;
}
i was wondering if i can get my table to inherit the 100% height from the DIV it sits within?
Would be greatful for some assistance.
Add height:100% to .container and it will stretch it.
JSFiddle Demo
Just apply a height: 100% to the container div, check out your updated jsfiddle http://jsfiddle.net/msbodetti/yVDXQ/125/
Div CSS:
.container {
background: yellow;
min-height: 100%;
height: 100%;
width: 50%;
margin: 0 auto;
}