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.
Related
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>
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>
Can someone please explain to me why the yellow colored DIV doesn't stretch to the bottom?
I have tried various permutations of height, min-height, etc., but to no avail.
Should I just use tables instead? :-)
Here is the output of the page: http://pastehtml.com/view/cd1ibk3vx.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}
#mainContainer {
width: 100%;
padding: 0px;
background-color: #EEEEEE;
min-height: 100%;
}
#mainContent {
width: 800px;
margin: 0px auto 0px auto;
padding: 100px 50px 50px 50px;
background-color: #FFFFCC;
min-height: 100%;
}
</style>
</head>
<body>
<div id='mainContainer'>
<div id='mainContent'>Why doesn't this stretch to bottom?</div>
</div>
</body>
</html>
Before min-height, add just plain height: 100%; to #mainContainer.
#mainContainer {
width: 100%;
padding: 0px;
background-color: #EEEEEE;
height: 100%;
min-height: 100%;
}
You'll also need to remove the padding (and width) on #mainContent, though. min-height is computed without padding and margins taken into account, so if you leave those in, #mainContent will always be taller than the browser window.
http://jsfiddle.net/mQuh5/1/
See now work EDIT
actually you have set parent class height set 100%
remove min-
#mainContainer {
width: 100%;
padding: 0px;
background-color: #EEEEEE;
height: 100%;
}
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.
I am trying to work on a new project using Twitter's Bootstrap framework, but I am having an issue. I want a full body background, yet the background seems to be limited to the height of the container div. here is the HTML/CSS code:
<!doctype html>
<html lang="en">
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<title>Bootstrap Issue</title>
<style>
body { background: black; }
.container { background: white; }
</style>
</head>
<body>
<div class="container">
<h1> Hello, World!</h1>
</div>
</body>
</html>
How can I get the body to take up the entire screen?
You need to either add this:
html { background: transparent }
Or, set the "page background" (background: black) on html instead, which is fine to do.
Why? Inside Bootstrap, there's this:
html,body{background-color:#ffffff;}
(bear in mind the default background value is transparent)
For more information on why this matters, see: What is the difference between applying css rules to html compared to body?
Note that this is no longer an issue with Bootstrap 3+.
Set the height of html and body to be 100% in the CSS.
html, body { height: 100%; }
Then it should work. The problem is that the height of body is automatically calculated to be the height of the contents, rather than the height of the whole screen.
/* here is a pure CSS solution */
<style type="text/css">
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
a:link, a:visited, a:hover {
color: #333;
font-style: italic;
}
a.to-top:link,
a.to-top:visited,
a.to-top:hover {
margin-top: 1000px;
display: block;
font-weight: bold;
padding-bottom: 30px;
font-size: 30px;
}
</style>
<body>
<img src="/background.jpg" id="full-screen-background-image" />
<div id="wrapper">
<p>Content goes here...</p>
</div>
</body>
<style>
body { background: url(background.png); }
.container { background: ; }
</style>
this works for a background image if you want it
best solution would be
.content{
background-color:red;
height: 100%;
min-height: 100vh;
}
its automatically take veiwport height(vh) in bootstrap.