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>
Related
I am trying to make a div expand to its max-height in px by using height 100%. It does not seem to want to work..
html
<div class="container">
<h2>Dynamically populated using PHP</h2>
<p>Dynamically populated using PHP</p>
</div>
css
.container {max-height:500px; height:100%;}
max-height will cap the DIV's height at 500px but allow it to be smaller if it does not take up 500px.
height: 100% will inherit the height from the parent element's height.
Use height: 500px if you want the DIV to be 500px in height.
I have included an example. For both the .outer and .inner DIVs un-comment or comment out the height values. You will see that if the height of the parent DIV is not set, then height: 100% will not match the height of the parent and will default to it's own content's height.
.outer {
background-color: blue;
height: 100px;
}
.inner {
background-color: red;
color: white;
/*height: 100%;*/
text-align: center;
width: 50%;
}
<div class="outer">
<div class="inner">
Inner
</div>
</div>
The height of an element will not obey the percentage height unless its parent has a defined height. The only exception to this rule is the <html> tag and the <body> tag. They CAN have percentage heights. You could use this exception to get your desired output.
I did it in this JSFiddle.
Hope this helps!
I found the real solution for this question. I say the real solution because specifying the px max height is not practical today.
Here the solution:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body, html {
height: 100%;
overflow: hidden;
}
.general {
display: flex;
height: 99%;
max-height: 99%;
}
.panel {
border: 1px dashed;
width: 30%;
height: 99%;
}
.main {
border: 1px dotted;
width: 100%;
max-width: 89%;
height: 99%;
}
</style>
</head>
<body>
<script>
</script>
<div class="general">
<div class="panel">
Panel: Left
</div>
<div class="main">
Main: Right
</div>
</div>
<script>
</script>
</body>
</html>
I have a simple code:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<style type="text/css">
html{
background-color: red;
height: 100%;
}
body {
background-color: black;
min-height: 50%;
padding: 10px;
}
.wrap{
width: 100%;
height: 50%;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
test
</div>
</body>
</html>
I expect to fit .wrap container to 50% of his parent container (body). But its doesnt work...
If i change height property to ex. height: 150px; and css working fine...
I don't understand why.
Thank you for your response!
This is just examle, not real layout. Idont understand why i cannot wrap .wrap container to 100% of body container (black color) with % unit. I think about responsive layout and i must to use % unit, not px or others.
Besides, it is little illogical situation :)
Try like this DEMO
CSS:
html {
background-color: red;
height: 100%;
}
body {
background-color: black;
height: 50%;
padding: 10px;
}
.wrap {
width: 100%;
min-height: 50%;
background-color: green;
}
Use min-height in the "px" that will work fine. you do not have the content in the div so you have to use min-height in pixels.
html{
background-color: red;
height: 100%;
}
body {
background-color: black;
min-height: 50%;
padding: 10px;
}
.wrap{
width: 100%;
min-height: 200px; /*-- similar like this --*/
background-color: green;
}
HTML :
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<style type="text/css">
html{
background-color: red;
height: 100%;
}
body {
background-color: black;
min-height: 50%;
padding: 10px;
height: 100%;
}
.wrap{
width: 100%;
height: 50%;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
test
</div>
</body>
</html>
Try this it will resolve your problem.
This happens because if u see there is no height of parent container so we have to give some height to it.
Change body style to
body {
height: 100%;
}
Do not embbed min-height & height with each other since each of them is calculated msed on other.
When you give height in percent to the container embedded in parent container with min-height, them a paradox arises.
1: for inner container (100%) of parent, height must have to calculate, but since parent have no specific height then it can not determin what to do.
2: Parent has min-height, but do determin its height, height of it's children should be konwn, which is not know in this case since it is 100% of parent which has ho height specified.
Due to above two case height of both parent & child become 0 (Undefined), which is happening in your case. To avoid this when giving percent height to any div ensure it's parent has a fixed height, otherwise whole calculation with get wrong.
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%
}
I'm stuck with this problem:
I have a div (#container) which contains two divs. The height of the container should be exact 100%, regardless of the content of this div - not less not more.
Inside this div I want two full-width divs on top of each other:
The (#upper) div's content automatically determines its height.
The (#lower) div's content should be scrollable, but only vertically. Its height is dependent on the height of (#upper): 100% - (#upper)height = (#lower)height
Currently I have the following css ...
body {
margin:0;
padding:0;
}
#container
{
position: relative;
width: 500px;
height: 100%;
max-height: 100%;
background-color: #f00;
}
#upper {
width: 100%;
background-color: #0f0;
}
#lower {
width: 100%;
background-color: #00f;
overflow: auto;
}
... as well as this code:
<div id="container">
<div id="upper"></div>
<div id="lower"></div>
</div>
How can the (#container)'s height be exactly 100% - independent of its content? Now the height becomes larger because of the combined content of (#upper) and (#lower)?
How can (#lower) be scrollable (only up and down, not left to right!)?
Thank you very much for your feedback, I hope we can all learn from this.
You should set your html and body elements to have a height of 100%, so your children divs know what to base the percentage off of. Like so:
html, body {
height:100%;
width:100%;
}
Change your container to this:
#container
{
width: 500px;
height: 100%;
background-color: #f00;
}
As for your scrolling issue, you're almost there. Change the code to the following:
#lower {
width: 100%;
height:100px;
background-color: #00f;
overflow-y: auto;
}
For it to work best, have a fixed height set on your lower div and that'll make it easy for the scrollable action to work best.
EDIT:
I realized I mis-read your question. You'd like to have your lower div fill the remaining height of the window. Here's how to do that in jquery:
var top = $('#upper').height();
var remaining_height = parseInt($(window).height() - top);
$('#lower').height(remaining_height);
I still haven't found a way to do that with only CSS... Sadly.
I think this may help you:
<head>
<title></title>
<style>
.upper{
height:50px;
border: 1px solid groove;
}
.lower{
height:calc(100% - 50px);
border: 1px solid blue;
}
</style>
</head>
<body>
<div style="height:500px; border:1px solid red; position:relative;">
<div class="upper"></div>
<div class="lower"></div>
</div>
</body>
This will take 50px out the lower div
For a pure CSS solution, use display: table-row.
<style>
*{
box-sizing: border-box;
margin:0;padding:0;
}
html, body, #container{
height: 100%;
}
#container{
display: table;
height: 100%;
}
#upper, #lower{
display: table-row;
}
#upper{
height: 100px;
}
</style>
<div id="container">
<div id="upper">bla</div>
<div id="lower">bla</div>
</div>
This solution only works if the height of the content is not more than 100%, see here: https://stackoverflow.com/a/13668087/603569
Here a 100% css alternative:
<div style="height:100%;">
main div
<div style="height:100%;padding-bottom:200px;">
header div
</div>
<div style="position:relative;height:200px;top:-200px;">
footer div
</div>
</div>
Remember that all parent elements, including body and html, must have their height set too.
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.