I have the following HTML and CSS :
<div id="a">
</div>
#a {
width: 100%;
height: 700px;
background-color: orange;
}
jsfiddle :
https://jsfiddle.net/9zwsk6bb/
I would like the height to fill the total height exactly of the outer panel without using something like flexbox. Is it possible in this case?
Sure, but for that, you need to set the parent elements height, because when you want the element's height to be 100% of the parent, then 100% of what? So, you need to have something like
html,
body {
height: 100%;
}
#a {
width: 100%;
height: 100%;
background-color: orange;
}
<div id="a"></div>
Note that if you have a wrapper element for #a, then you need to set some height for that element as well.
Related
My footer will not stick to the bottom of the page in the latest Firefox, while it works in Chrome and IE11. From what I can tell the min-height:100% for the wrapper has no effect in Firefox.
HTML
<div id = "wrapper">
<div id = "content">
</div>
<div id = "push">
</div>
</div>
<div id = "footer"></div>
CSS
#wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -235px;
}
#push{
height:235px;
}
#footer{
position:relative;
height:235px;
width:100%;
}
It's hard to say by the posted code but according to CSS level 2 spec:
10.7 Minimum and maximum heights: 'min-height' and 'max-height'
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the percentage
value is treated as '0' (for 'min-height') or 'none' (for
'max-height').
Hence you should make sure that the parent of #wrapper has an explicit height. If the #wrapper is located in <body>, try specifying height: 100% on <body> and <html> elements as well:
html, body {
height: 100%;
}
Because a percentage value for height property is relative to the height of the generated box's containing block as well, in this case the <html>. Otherwise the value computes to auto.
In addition, using height: auto !important; and height: 100%; together doesn't make sense and they're pointless; So it's better to remove them.
#wrapper{
min-height: 100%;
margin: 0 auto -235px;
}
Finally if it didn't work, you could give the following approach a try:
Position footer at bottom of page having fixed header
Let's simplify what you have a little.
Your #push can be replaced with the pseudo element :after on your wrapper.
Remove the height on the wrap and avoid !important.
html,body needs to have a height of 100% in order for other elements to have percentage heights
Have an example!
HTML
<div class="wrap">
<!-- main content -->
</div>
<footer class="footer"></footer>
CSS
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.wrap {
min-height: 100%;
margin-bottom: -235px;
}
.wrap:after {
content: "";
display: block;
}
.footer, .wrap:after {
height: 235px;
}
.footer {
background: #F00;
}
If you are trying to have your your footer stick to the bottom, use:
#footer{
position:fixed;
bottom:0;
height:235px;
width:100%;
}
I just tried it with your code and verified that it works on the latest firefox.
I'm trying to force my content div to fill the whole wrapper div.
The wrapper is set up to force my footer to the bottom of the window, or page. Which it does just fine.
If I use:
min-height: 500px (or 40em); the content div stretches as requested.
However, if I use:
min-height: 100% (or any other %); nothing happens to the content div.
This makes no sense to me. What am I missing?
Per the request (excluding borders and colors and stuff):
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
width: 80%;
margin: 0 auto -4em;
}
#content {
min-height: 100%; // nothing happens, change to em or px something happens.
}
#sidebar {
float: right;
}
#footer {
clear: both;
height: 4em;
}
#push {
height: 4em;
}
<body>
<div wrapper>
<div header>
<div menu></div>
</div>
<div sidebar></div>
<div content></div>
<div push></div>
</div>
<div footer></div>
</body>
You can try using "line-height: 100%" on your content div. Although... if there is an explicit height set on your wrapper div, you should be able to use 100% on one of the various height measurements to force it to expand.
Post some quick example markup that shows your wrapper and your content.
A simple (one might think!) question to all CSS gurus: I would like to shrink a DIV snugly around an IMG. The IMG is 600 x 800 and I needed it much smaller. So I go {height: 100%; width: auto;} and constrain the height via a wrapper DIV. However, to maintain the (unknown to me) AR, I cannot fix the width on the DIV. I tried to set the wrapping DIV to "display: inline-block" or "float: left" or "position: absolute" or ... - no matter: most browsers will stretch that DIV 800px wide - the original width of the full-size IMG - so it looks sthg like this:
[[IMG].............................]
Bizarrely, I can add some text to the DIV (just to test), and that text will actually appear right next to the scaled IMG:
[[IMG]Hello world..................]
Does anyone here know why the original size of the IMG matters (for dimensioning the width, it does not affect the height)? And what I might be able to do to shrink the DIV?
Thanks for looking.
EDIT:
To test Pär Wieslander's idea, I wrote a little test bed that should help clarify what I am on about:
<style type="text/css">
html, body {
height: 100%;
}
#dialog {
background: green;
height: 50%;
position: relative;
}
#frame {
border: 2px solid black;
display: inline-block;
height: 100%;
position: absolute;
}
#img {
height: 100%;
width: auto;
}
</style>
<body>
<div id="dialog">
<div id="frame">
<img id='img' src='...' />
</div>
</div>
</body>
Just pick any large IMG of your choice. You should find an inexplicably wide frame around and image that has squeezed - height-wise - onto the green carpet.
If you specify the image's width or height as a percentage, that percentage is calculated in proportion to the size of the parent block. So specifying width: 50% on the image doesn't mean 50% of the original image width -- it means 50% of the width of the parent block. The same goes for the height. Thus, there will always be extra space around the image as long as you specify the width or height as a percentage.
The solution is simple -- specify the dimensions in pixels, ems or any other unit other than a percentage:
HTML
<div class="wrapper">
<img class="small" src="myimage.jpg">
</div>
CSS
img.small {
width: 150px; /* or whatever you like */
display: block; /* to avoid empty space below the image */
}
div.wrapper {
display: inline-block;
border: 1px solid #000;
}
Edit: Based on your comments and updated post, I understand that what you really want to do is to set the width of the surrounding div and make the image fill up that div. Here's an example that does that:
HTML
<div class="wrapper big">
<img src="myimage.jpg">
</div>
<div class="wrapper small">
<img src="myimage.jpg">
</div>
CSS
img {
display: block;
width: 100%;
}
.wrapper {
margin-top: 1em;
border: 1px solid #000;
}
.big {
width: 600px;
}
.small {
width: 300px;
}
So I go height="50%", say, and width="auto" (to maintain AR).
Why not just go width="50%" too as this would resolve it.
I think Pär's approach is right: don't do { height: fix; width: auto; } but do instead { height: auto; width: fix; } Works better.
I have some HTML+CSS code that wants to layout several divs. The layout is like this: all divs stay in a parent div whose size is fixed. Then each child div should stay on its own line, and use the minimum height for drawing its content. The last div should consume all remaining height, so that the parent div is entirely filled.
This code shows my approach using CSS float and clear properties:
<html>
<head>
<style>
.container {
width: 500px;
height: 500px;
border: 3px solid black;
}
.top {
background-color: yellow;
float: left;
clear: left;
width: 100%;
}
.bottom {
background-color: blue;
height: 100%;
float: left;
clear: left;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="top">top1</div>
<div class="top">top2</div>
<div class="top">top3</div>
<div class="top">top4</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
However, the last div overflows from the its parent. I guess it is because of the width: 100%.
Is there any way to solve this problem? I want to avoid setting the overflow attribute of the parent, and also I have to avoid using absolute positioning. If somehow I could trick the last div to use the height of the parent minus the sum of height of the other divs.
Add:
div.container { overflow: hidden; }
It's not overflowing because it's 100% width. It's overflowing because it's a float and thus removed from the normal layout. Changing the overflow property will change how the browser caters for contained floats.
Oh and if you aren't already, make sure you're using a DOCTYPE. It particularly matters for IE.
I have div that contains 2 divs in it. One of the child divs has static height 2em, and I want the other one to vertically fill the rest of the space of the parent div. How do I do this?
Edit: I need the parent div to fill the screen.
This depends on exactly what you want to achieve. Getting a fixed top and variable bottom where the container is only as large as it needs to be for the two children.
Assuming:
<div id="parent">
<div id="top"></div>
<div id="bottom"></div>
</div>
use:
#top { height: 2em; }
and the bottom div will be as large as it needs to be. You can make the bottom fixed height and achieve the same thing.
But I suspect what you want to do is have the outer div fixed height (say 100%). That gets much harder. The problem is that there is no way in CSS of saying "height of 100% minus 2em" without using an (ill-advised) CSS expression.
One approach is to overlay the top with the bottom.
#outer { position: relative; }
#top { position: absolute; height: 2em; top: 0; left: 0; width: 100%; }
#bottm { height: 100%; padding-top: 2em; }
The top div actually overlays the bottom. This is fine so long as you don't want a border.
You can use Faux Columns if you're using an image for the background or just move the background color back to #parent to give the appearance of filling the screen with the #bottom div. It would fill the page by giving it a 100% height (as long as html and body also get height: 100%).
Example:
<head>
<title>TITLE</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#parent { height: 100%; background: #f08; }
#top { height: 2em; background: #80f; }
</style>
</head>
<body>
<div id="parent">
<div id="top">TOP DIV</div>
<div id="bottom">THE REST</div>
</div>
Since CSS is just about styling, giving the appearance of 100% height is the same as having 100% height. Right?