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%;
}
Related
I have the following webpage.
I am trying to get the blue red and white gradient to fill the entire height of the screen. Currently I have both flags on either side of the content container, all of them are surrounded by a main container.
.container{
width: 100%;
background: -webkit-linear-gradient( $blueToRed);
background: -o-linear-gradient($blueToRed);
background: -moz-linear-gradient($blueToRed);
background: linear-gradient($blueToRed);
margin-bottom: -99999px;
padding-bottom: 99999px;
overflow: auto;
}
is inside of firstContain
.firstContain{
border-left: 4px solid white;
border-right: 4px solid white;
background: #FFF;
max-width: 980px;
position: relative;
display: block;
margin: 0 auto;
overflow: auto;
z-index:1000;
}
I am trying to get contain to be 100% height, but I add that and it doesn't move. I thought the 99999 margin padding trick would work, and it did, but then I lost some css that made it work. Any help is welcome. Thanks in advance for the advice in what I am doing wrong.
Try vh unit.
.container{
min-height:100vh;
}
Try adding height: 100% in both your html, body, .container in your styles like this:
html, body, .container {
height: 100%;
}
.container {
border-left: 4px solid white;
border-right: 4px solid white;
background: #333;
max-width: 980px;
position: relative;
display: block;
margin: 0 auto;
overflow: auto;
z-index:1000;
}
<html>
<head>
</head>
<body>
<header></header>
<div class="container">
<p>Website Content</p>
</div>
<footer></footer>
</body>
</html>
For now, maybe you can go with
min-height: 100%;
in your container css, since there are no elements in the page to cover the height. So, min-height should do the work for you!
I want to make a page which shows:
A top bar
A full page iframe (but for the top bar)
I am translating this to something like this:
<div id="topbar">bla bla bla</div>
<iframe src="http://www.ign.es/iberpix2/visor/" style="width:100%; height:100%;"</iframe>
However the problem is that the height is 100% of navigator height, and with the "topbar" the real size exceeds 100%.
Is it possible to make what I am looking for? This is, to match the iframe height to 100% of the REMAINING page height.
In the Snippet the .topBar and .frame are wrapped in .box. .topBar has a red border and .frame has a blue border which demonstrates they both co-exist within 100% of height. Among all of the styles, the one most relevant is:
height: calc(100% - 40px);
The 40px is the height I arbitrarily gave to .topBar.
Also these properties and unit measures as well:
position
vw and vh
overflow-x and overflow-y
SNIPPET
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
font: 400px 16px/1.428 Consolas;
}
body {
overflow-x: hidden;
overflow-y: scroll;
}
.box {
height: 100vh;
width: 100vw;
position: relative;
}
.topBar {
height: 40px;
width: 100%;
position: absolute;
top: 0;
right: 0;
left: 0;
border-bottom: 3px solid red;
font-size: 1.25rem;
text-align: center;
}
.frame {
height: calc(100% - 40px);
width: 100%;
position: absolute;
top: 40px;
left: 0;
border-top: 3px solid blue;
overflow-x: hidden;
overflow-y: scroll;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>topBar</title>
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<div class="box">
<header class='topBar'>topBar</header>
<iframe src="https://css-tricks.com/cross-domain-iframe-resizing/" class='frame' frameborder="0" scrolling="yes" width='100%' height='100%'></iframe>
</div>
Well, I managed to solve my problem.
The key was adding margin: 0px; padding: 0px; to <body> and using calc(100% - 30px) for the second <div>.
<body style="height:100%; margin: 0px; padding: 0px;">
<div style="height:30px; background-color: #B0CCB0">Hola.</div>
<div style="height: calc(100% - 30px); background-color:red">
<iframe src="http://www.ign.es/iberpix2/visor/" style="display:block; width:100%; height:100%; border:none;">Tu navegador no soporta iframes, accede directamente a la herramienta IBERPIX.</iframe>
</div>
</body>
Great!
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've been reading a lot of entries to figure out why my content won't force the body and html tags to stretch to 100% of the inner content's height.
My page is here: http://truerenaissance.devmu.com/artisthighlight/
You'll see the background image (set on the body tag) is not stretching to 100% of the page or inner content's height. I am only using position: relative everywhere. I'm also using a 'clearfix' at the bottom of the content.
If anyone has any ideas as to why this is happening, I'd really appreciate it.
html, body { width: 100%; height: 100%; min-height: 100%; padding: 0px; margin: 0px; background: white; font-size: 12pt; font-family: 'Arial'; }
#site-wrapper { width: 775px; height: 100%; min-height: 100%; margin: 0 auto; padding-bottom: 100px; background-color: rgba(255,255,255,.75);
padding: 0px; z-index: 10; }
#site-wrapper .inner { min-height: 100%; padding: 20px 20px 40px 24px; }
.clear:before,
.clear:after {
content:"";
display:table;
}
.clear:after {
clear:both;
}
.fixer { display:block;clear:both;overflow:hidden;width:auto;height:0px;line-height:1px;font-size:1px; }
<html>
<body>
<div id="body-wrapper">
<div id="site-wrapper">
<div class="inner">
</div>
</div>
</div>
</body>
</html>
Thanks!
Well you constrained the body height to the viewport height and you didn't stretch the background vertically.
Remove height: 100% from html and body and use background-size's cover value.
Thanks for the big-ass picture by the way.
I've tried several suggestions online, making my html and body tags have a height of 100% as well as a min-height of 100%. I've set my div tag as the same as well.. It just isn't expanding to the bottom of the screen.
Also I can't get a second floating div to fill 100% of the space not filled up by another div beside it. It will only fill 100% of the screen (under the other smaller div) or enough to allow for the text.
I guess it should be noted that I tried viewing in IE9 as well as Firefox 16.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
height: 100%;
min-height: 100%;
overflow:hidden;
}
div#topbar {
width: 100%;
height:133px;
background-image :url(bkgnd_header_tile.jpg);
}
div#logo {
width: 187px;
height: 133px;
background-image:url('headerlogo_home.jpg');
float: left;
}
div#text {
width: 1;
height: 133px;
float: right;
}
div#campuses {
height: 68px;
padding-top: 10px;
color: White;
text-align: right;
}
div#title {
height: 41px;
color: White;
text-align: right;
padding-top: 14px;
}
div#sidebar {
height: 100%;
width: 250px;
float: right;
background-color: Black;
}
div#body {
height: 100%;
width: 100%
float: right;
font-family: Segoe UI;
}
span.text {
padding-left: 15px;
padding-right: 15px;
font-family: Sans-Serif;
font-size: small;
}
span.name {
padding-left: 15px;
padding-right: 15px;
font-family: Sans-Serif;
font-size: x-large;
}
</style>
</head>
<body>
<div id="topbar">
<div id="logo"></div>
<div id="text">
<div id="campuses">
<span class="text">St. John's Campus</span>
<span class="text">Grenfell Campus</span>
<span class="text">Marine Institute</span>
<span class="text">Harlow Campus</span>
<span class="text">Distance Education</span>
</div>
<div id="title"><span class="name">Memorial Self Service</span></div>
</div>
</div>
<div id="sidebar">
</div>
<div id="body">
asdf</div>
</body>
</html>
Setting position:relative to body will take body's height into account and stretch absolutely positioned content along body completely
Note that height property specified in percentage is calculated with the respect to the containing block
or you can also try overflow:hidden; in body tag
I would try setting the position to absolute as always I had these kind of weird behaviour, the absolute came to rescue, on top of that I would also set left and top to 0
Basically, following Ravindra's suggestion, and modifying it a bit, I got this to work. I set the body with the following style settings
body {
position: absolute;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
and used these for my two DIV sections:
div#body {
position: relative;
height: 100%;
overflow:scroll;
}
div#sidebar {
position: fixed;
background-color : #EFEFEF;
height: 100%;
width: 300px;
overflow: hidden;
}
div#content {
height: 100%;
float: left;
margin-left: 300px;
<div id="body"></div> is a parent container for the other two div's, id="sidebar" and id="content". I did this because I also had a top bar in its own div 133px high just above the "body" div.