I have the following html markup:
<div id="all">
<div id="back">
<div id="header">test</div>
</div>
</div>
And the following css:
html,body{
height: 100%;
}
#header{
height: 100%;
background: red;
}
demo
But also the hundred percent height is not working!
To make 100% height work you need to make sure your parent div also contain height 100%. So try this:
html,body{
height: 100%;
}
#header{
height: 100%;
background: red;
}
#all,#back{
height: 100%;
}
demo
You need to have all parents of #header to have height: 100% for this to work.
try this
html,body{
height: 100%;
min-height:100%;
}
#header{
height: 100%;
background: red;
}
#all,#back{
height: 100%;
}
height:100% means it will occupy the full height of the parent element.In your scenario parent div's #all and #back doesn't have their own height defined.So you need to give height:100% to them also
#all,#back
{
height:100%
}
Related
I'm trying to do this in CSS and thought it was simple, I've never actually needed to do this before, but now I've tried it I can't get it to work.
I have a container, and in it is an image.
What I want is the image to increase in size based on HEIGHT not WIDTH. I thought this would as easy as this:
#project-header {
height: 50%;
}
#project-header img {
display: block;
height: 100%;
width: auto;
margin: auto;
}
This isn't working.
My container is 50% height of the browser window, so this is all fine, but the image displays at its original size.
I expected it to behave as a responsive image would when using width: 100%, height: auto; but my image is ALWAYS its original size (and so flows out of the container) and doesn't adapt to the height of its container.
Am I missing something? Or is this just not possible? Is there a way to do this?
To have your div take height: 50%, you first need to give height:100% to all the parent divs all the way to the html tag
html, body{
height:100%;
}
Then your css will work as expected
#project-header{
height:50%;
}
#project-header img{
max-height: 100%;
width: auto;
}
html, body{
height:100%;
/* width: 95%; */
}
#project-header{
height:50%;
width: 500px;
}
#project-header img{
max-height: 100%;
width: auto;
}
.second-image{
height:50%;
/* width: 500px; */
}
.second-image img {
max-width: 100vw;
height:auto;
width:auto;
max-height:100vh;
}
Method 1
<div id="project-header">
<img src="http://via.placeholder.com/350x150" alt="">
</div>
Method 2
<div class="second-image">
<img src="http://via.placeholder.com/350x150" alt="">
</div>
This CSS rule not working..
#wrapper{
height:100%;
width:100%;
background-color: aliceblue;
}
The wrapper does not take the full height of the page..
Just try like below it will be work for your issue.
First, pick the div which was you want to make 100% height of your any device and then apply CSS like below.
.wrapper {
height: 100vh;
}
For make your section or div height same as well as your device height you have to use VH, It's called viewport height.
I am trying to create a div for which I set the height should be same as that of my page.
height:100%
means nothing by itself...it hs to be 100% of something..and those numbers have to be calculable all the way up the parent-child chain.
So what can the wrapper be 100% of? The answer is the <body> which itself is a child of the <html> element.
Once we set those, it all works as you can't go up the chain any further than the <html> element which is the height of the viewport.
html,
body {
height: 100%;
margin: 0;
}
#wrapper {
height: 100%;
background-color: blue;
}
<div id="wrapper"></div>
That said, I'd go with min-height:100% on the wrapper to allow for overflow issues if the content exceeds the vireport height.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
#wrapper {
min-height: 100%;
background-color: blue;
}
.expander {
height:1000px;
}
<div id="wrapper">
<div class="expander"></div>
</div>
<!DOCTYPE html>
<style>
img.normal {
height: auto;
}
img.big {
height: 500px;
}
p.ex {
height: 100px;
width: 100px;
}
</style>
<title></title>
</head>
<body>
<img class="normal" height="84" src="hari.jpg" width="95"><br>
<img class="big" height="84" src="hari.jpg" width="95">
<p class="ex">
sample
</p>
</body>
There are two floated divs of different height inside a wrapper div. I need both of them to be 100% of height of the body i.e. of the same height. Also used clearfix. But height:100% doesnt seem to work. How to do this?
Demo
Html:
<div class="wrapper">
<div class="primary">
<img src="http://demo1.opentaps.org/images/products/small/gis_computer_glen_rolla.png" />
</div>
<div class="secondary">
<img src="http://demo1.opentaps.org/images/products/small/gis_computer_glen_rolla.png" />
</div>
<div class="clearfix">
</div>
</div>
CSS:
body {
min-height: 100vh;
background-color: green;
margin: 0;
}
.wrapper{
background-color: blue;
height: 100%;
}
.primary{
float: left;
width: 80%;
height: 100%;
background-color: yellow;
}
.primary img{
height: 100px;
width: 100px;
}
.secondary{
float: right;
width: 20%;
background-color: red;
height: 100%;
}
.secondary img{
height: 500px;
width: 100px;
}
.clearfix{
clear: both;
}
All you need to do is add a height of 100% to the html and body tags like so:
html, body {
height: 100%;
}
Demo:
http://jsbin.com/EsOfABAL/1/
if you want to use vh units (seen in your code), it does makes it easier, no need to worry about 'heritage' and see your columns being stopped at 100% height of the window.
if you mix the method of faux-column and clear fix , you need to set only once min-height:100vh; on the floatting element.
Your yellow background has to be drawn in the wrapper and the red one in the non-floatting element wich is stretch with the clearfix method.
body {
margin: 0;
}
.wrapper{
background-color: yellow;
overflow:hidden;
}
.primary{
float: left;
width: 80%;
min-height:100vh;
}
.wrapper .primary img{
height: 100px;
/* width:1000px; */
width: 100px;
}
.secondary .overflow{
margin-left:80%;
background-color: red;
}
.overflow:after {
content:'';
height:0;
display:block;
clear:both;
}
.secondary img{
height: 500px;
/*height:100px;*/
width: 100px;
}
uncomment height value for image to check behavior and drawing of your page, scrolling or not .
http://codepen.io/anon/pen/chHtK
Hope this helps you to understand the use of vh (or vw) units , for the faux-column and clearfix methods, it's just a reminder of old methods :)
Enjoy
The html element also needs to be 100% - try this:
html { height: 100%; }
body {
height: 100%;
background-color: green;
margin: 0;
}
I want my margins to collapse fully before the body starts to become narrower like how it is on http://www.skysports.com/, and only when the margins have fully collapsed then the body can become narrower. I've been playing around with px, em, and % in my css for ages and haven't been able to make it work. Here is what i have so far.
html { background-image:url(images/webBackground.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
background-attachment:fixed;
height:100%; width:100%;
}
body { background:black;
height:100%; width:75%;
margin:0 12.5% 0 12.5%;
}
#container { width: 100%; height: 100%; }
Here's a jsfiddle exmaple of what I think you're asking for.
HTML
<div id="wrapper">
<div id="main-content">
<div class="push"></div>
</div>
</div>
CSS
body, html {
margin: 0px;
padding: 0px;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
width: 500px; /* specific resolution width */
margin: 0px auto 0px;
}
#main-content {
background-color: red;
}
#main-content .push {
height: 500px;
}
Sorry I didnt fully understand your question. Assuming that you need your image center aligned whatever width of the screen.
body
{background: url(images/webBackground.jpg) no-repeat fixed center 0 black;}
I've a page like this:
<html>
<head>
<style type="text/css">
#mainDiv{
height: 100%;
}
#myDiv{
overflow: auto;
width: 400px;
}
</style>
</head>
<body>
<div id="mainDiv">
<div id="myDiv">content</div>
</div>
</body>
</html>
I wish mainDiv was entirely contained in the screen (without scrollbars). This div contains myDiv and myDiv height depends on the screen height in such a way that its bottom border has a 30px margin from the screen bottom (or mainDiv bottom).
What can I do?
Like #Johno suggested the solution should be
#mainDiv { width: 100%; height: 100%; padding-bottom: 30px; }
#mydiv { width: 100%; height: 100%; }
but when you try this solution you get a scrollbar because the content height is bigger than that of the window.
You get this because I think that the margin is added to the height of the content (that is 100%). So the order of the rules evaluation is:
Set the content height to 100%
Add a border of 30 px to the current height.
I tried to set a fixed height to the content, that is the window height minus 30 px, and I got the correct result.
#mainDiv {
width: 100%;
height: 100%;
}
#mydiv {
width: 100%;
height: 100%;
margin-bottom: 30px;
}
HTML
<div id="mainDiv">
<div id="mydiv">content</div>
</div>
You could try:
#mainDiv { width: 100%; height: 100%; padding-bottom: 30px; }
#mydiv { width: 100%; height: 100%; }
The padding of #mainDiv should give the effective margin that you're hoping for on #mydiv.
To make sure there are no scroll bars, you may need to remove padding etc from the body too.