So I was working on a website when I came across the problem of my footer not staying at the bottom of my container div (the footer was not inside of the container, it was placed after it in the HTML). I realized this was because some of the child divs were floated, so I had to put overflow:auto on the container--HOWEVER, because I needed the children to have percentage heights, I had the height at 100%, and as you probably know overflow:auto + specified height = scrollbar. But having just a min-height wouldn't allow the child divs to get their height. Having both certainly doesn't work.
I recreated the problem in some separate testing files, getting rid of all the unnecessary CSS (although I'm sure some still remains) so I could visualize the problem without clutter. It's on this JSFiddle currently. I have the height commented out currently, because ideally I won't be using it.
Here's my container div CSS:
#container {
position: relative;
width: 70%;
/*height:100%;*/
min-height: 100%;
overflow: auto;
margin: 0 auto;
background-color:#FFDA8A;
}
And one of the child divs that needs a percentage height:
.featured {
position: relative;
width: 100%;
height: 50%;
background-color:red;
}
EDIT: I want to add that I know why this is happening, rather that I was wondering if anybody has stumbled upon a CSS-only way of dealing with it. If it can't be percentages, then I'll look into flex-boxes instead (as mentioned by PiniH, thanks!).
It's an old question, with no really good answer, usually when stuff get like this, you should use flex boxes in the end, the min-height property will not affect the children, unless it's a table, and then it gets a mess.
You can add:
#container {
position: relative;
width: 70%;
/*height:100%;*/
min-height: 100%;
height: 1px;
overflow: auto;
margin: 0 auto;
background-color:#FFDA8A;
}
But then it won't grow which I guess is why you used min-height in the first place.
I have been boggling my mind around this for a while, eventually I think flex is the only answer in this case.
Related
This will probably turn out to be a trivial issue, but I'm trying to center all my divs inside a container, but no matter what I try with the auto margins, everything is still aligned to the left of the page.
Anyone know what's going on?
Stuck it on jsfiddle too:
http://jsfiddle.net/eLogy4nh/
#page-container {
margin: 0px auto;
}
Any help would be awesome chaps.
You #page-container block has 100% width by default, so the margin: 0 auto will not do anything.
However, your block level child elements can be centered, for example:
#main-nav {
background: grey;
height: 30px;
width: 90%;
margin: 0 auto;
}
You need to apply the margin: 0 auto to each container that you want centered within your #page-container parent block.
You can do this many ways with CSS, either apply the same rule to each block that needs to be centered or create a CSS class with the centering rule and then apply the class to each block, for example:
#page-container > div {
margin: 0 auto;
}
Note that a simpler way of getting a similar result would be to set the width of #page-container to 90% and let the child elements take on the full width of the parent block.
However, both techniques are valid and the one to pick may depend on other design and layout considerations, for example, the use of background images and so on.
See demo fiddle at: http://jsfiddle.net/audetwebdesign/resqhsoe/
Looks like this has already been answered above...
But to center an item it will need a width, without one a block element will contain 100% of the available space.
#page-container {
width: 70%;
margin: 0px auto;
}
Given the following structure, I need level2 have a min-height without changing the structure. Further, I am not able to move the overflow: hidden to a different class (the example is simplified, it would affect a lot of other things). It works with px, but not with %. All other css properties can be changed.
I am aware of vh, which works exactly like it should. But I would love a solution with CSS2.
Fiddle
HTML:
<div id="level1">
<div id="level2">
<div id="heighter"></div>
</div>
</div>
body and html: height 100%
level 1: min-height 100%, overflow hidden
level 2: min-height 100%
heighter: height 200px
Edit: More informations about the overflow:hidden
I am using this for a offcanvas navigation. This is a place where I can't use max-width (right?). If I replace the overflow with the max-width, the layout gets recalculated and after that I am able to scroll the level2 on the x-axis (left and right). Same problem as here (click on Push-Menu-Left and then you are able to scroll the x-axis). What I am trying right now is preventing the x-axis scrolling and being able to use the min-height: 100% corretly.
In order to calculate min-height, div#level2 needs to refer to the height definition of its parent. In your code, div#level1 does not have a specified height. You an specify one like so:
#level1 {
height:100%;
overflow: hidden; /* This has to be here */
background-color: red;
}
WORKING EXAMPLE
EDIT:
Explicitly setting height on div#level1 (rather than setting min-height), you no longer need the overflow:hidden definition. Removing that allows the page to scroll when div#heighter expands beyond the browser's height.
(You mentioned that you need the overflow:hidden for other reasons. If possible, please edit your question to describe those reasons a bit more.)
#level1 {
height:100%;
background-color: red;
}
#level2 {
min-height: 100%;
background-color: lightseagreen;
}
#heighter {
height: 2000px;
width: 100px;
background-color: white;
border: 5px dashed black;
}
WORKING EXAMPLE
http://jsfiddle.net/b8uj75e5/3/
#level2 {
min-height: 1000px; /* Working */
min-height: 100%; /* Not working */
background-color: lightseagreen;
display: block;
position: absolute;
width: 100%;
}
IT LIVES.
I just messed around until it worked.
I have the following layout (I'm using Meteor):
<template name="headerFooter">
<div class="container-fluid fill-height">
{{> header}}
{{> UI.contentBlock}}
{{> footer}}
</div>
</template>
<template name="home">
{{#headerFooter}}
<div class="row body-film">
<div id="newsfeed" class="col-sm-offset-7 col-sm-5 block-film">
{{#each stories}}
<div class="story">...</div>
{{/each}}
</div>
</div>
{{/headerFooter}}
</template>
and this (relevant) css backing it up:
html {
height: 100%;
}
body {
min-height: 100%
}
.fill-height {
height: 100%;
}
The html and body elements are both behaving as expected. They fill their areas at any zoom level or size.
However, the container-fluid with the fill-height class added isn't doing the job. It's only wrapping it's content, and not filling to the bottom. This is a problem because it is responsible for adding body-film and block-film to the page, which are just semi-transparent backgrounds to give the whole thing some color unity.
Here are some screenshots, all with the page zoomed out so the content doesn't fill the height:
Now here it is with the body element selected. As you can see it fills the parent just fine.
But the container-fluid doesn't.
With fill-height I've tried both height and min-height, and they look exactly the same.
Your help is appreciated!
Update
I've been trying every possible combination of min-height and height on these three elements, and nothing works properly.
height on all three works when the content is too small for the viewport, but when the content is too large for the viewport, the content block overflows out of the body entirely, which means the films are too short for it.
min-height on all three seems to me to be the most logical way to go, but it breaks when the content is too small. In this case, the body element doesn't stretch to fill its html parent.
What's going on!!!!????? Is this a bug in the new Blaze templating engine Meteor uses?
Update
I've just tried height: inherit in my fill-height, and it didn't work either. I'm really at the end of my rope. This seems like it should be so simple.
Update
Alright, I've got a slight change to happen. With this less:
.fill-height {
min-height: 100%;
height:auto !important;
height: 100%;
}
.body-film {
.fill-height();
}
.block-film {
.fill-height();
}
The container-fluid is now full height, but not the body-film and block-film which are using the exact same mixin!!
Here is a screenshot, showing the row.body-film, which should be full height, since the container-fluid above it is (take my word for it, the container-fluid is now stretched to fill the body).
Note, manually adding the fill-height to the html declaration of the row didn't change anything, it behaves identically as if it were simply receiving that through the body-film mixin.
Why is it that some elements don't respond at all to all of these min-height demands?
P.S., I'm using Chrome, but it is on a ubuntu machine, so I can't be sure if there are any inconsistencies.
Answer
The following ended up working:
html, body {
height: 100%;
}
.container-fluid {
height: 100%;
overflow-y: hidden; /* don't show content that exceeds my height */
}
.body-film {
height: 100%;
overflow-y: auto; // a value of 'scroll' will force scrollbars, even if they aren't necessary. This is cleaner.
background-color: fadeout(#studio-bar-color, #studio-body-film-trans-delta);
}
.block-film {
min-height: 100%;
overflow-y: hidden; /* don't show content that exceeds my height */
background-color: fadeout(#studio-bar-color, #studio-block-film-trans-delta);
}
The overflow attribute was extremely key, and it's something didn't previously know much about. Giving a scroll value to the entire body (the thing that needed to be able to move up and down) was the answer, as well as giving the innermost element (block-film) the min-height to ensure it stretched itself and subsequently all of the parent elements.
I know you said you've tried every combination, but what about:
html, body {
height: 100%;
}
.fill-height {
min-height: 100%;
height:auto !important; /* cross-browser */
height: 100%; /* cross-browser */
}
The problem with setting min-height: 100% on the body, is that height: 100% on the child div does not actually have a proper parent height to reference, and will not work.
EDIT:
This logic applies to all child divs. So in your case, the body-film div is a child of container-fluid. Because container-fluid now has a min-height of 100%, and not a defined height (it is set to auto), when you give a height percentage to body-film, it doesn't have a height to reference. It's worth having a read of MDN - CSS height and MDN - CSS min-height.
In other words, if you wish to have a div with a height or min-height of 100%, then all of its parent elements need to have a defined height of 100%, all the way up to the html tag.
What you may need to do is something like this:
html, body {
height: 100%;
}
.container-fluid {
height: 100%;
overflow-y: hidden; /* don't show content that exceeds my height */
}
.body-film {
min-height: 100%;
overflow-y: scroll;
}
This may not be the definitive answer as it depends on what you want exactly, but hopefully this sets you on the right track.
Although this doesn't directly relate to the html sizing problems, I recently discovered a much easier way to achieve this sort of "transparent film" thing, using box-shadow.
This article breaks it down pretty well. He also offers other methods, but frankly this seems like the simplest.
<div class="example"></div>
.example {
position:relative;
width: 300px;
height: 313px;
box-shadow: 0px 313px rgba(255, 0, 92, 0.6) inset;
background: url(/img.png);
}
I want to place a div fixed on the left and near I want to place other div.
Imagine a twitter webpage, I want to fixed the left panel (where you write yout tweets) and near I want to place the panel where you read tweets.
Now I have the following code:
<div id="container">
<div id=fixed-menu>
</div>
<div id="content">
</div>
</div>
#fixed-menu {
position:fixed;
background: #fff;
padding: 10px;
top:60px;
left: 10px;
width:300px;
max-width: 300px;
}
#content {
background: #fff;
padding-top: 10px;
}
In this way, the div with id="content" appear on left so, the fixed-menu doesn't appear, because it is under content div.
If I use margin-left in #content the error is solved, but I don't want use that, any other solution?
Thanks.
One of the first things to note is that by putting a position Fixed on div#fixed-menu breaks it out of the normal document flow. What this means is that the other block/inline level elements do not know about it. Also by making it fixed, you make it fixed relative to the window. If you want it "fixed" within the container and not to a certain point on the screen I would go with position:absolute and then a position:relative on it's parent container.
Either way, the problem you're experiencing where div#content doesn't respect the position of the fixed element, is due to the fact that the fixed element is no longer part of the normal document flow. Adding a z-index to div#fixed-menu should bring it above the content. However, you will see overlapping and will have to account of the offset of div#content with either margin on div#content or padding on the parent container.
If you look at this fiddle: http://jsfiddle.net/f38aj/
css:
#container {
position: relative;
height: 700px;
padding: 0 0 0 320px;
}
#fixed-menu {
position: fixed;
background: red;
padding: 10px;
top:8px;
left: 8px;
width: 300px;
max-width: 300px;
}
#content {
background: blue;
padding-top: 10px;
}
If you notice we create padding in the container, where we end up overlaying the div#container object.
we have a fixed container on the left while the right side content will scroll with the page. If you can come up with a non fixed solution it might be better, as there are phone browsers like older versions of iOS that will take anything that is position fixed and replace it with position absolute.
A side note, working with fixed/absolute positioning is useful especially in some crazy cases, but it does require a little more due diligence on your/your teams parts to maintain. If you start getting into z-indexes you might want to look at a library like less or sass just to create global css variables, which will make it easier to manage what can turn into an almost unmanageable experience.
hope that helps.
I am using the following bits of code to keep my menu items fixed while allowing for the scrolling of content because it seems to be the most stable method across all browsers.
body { overflow: hidden; }
div.content { height: 100%; overflow: auto; }
My problem is simple, and yet I can not seem to figure it out, the content inside the tag butts up against the scrollbar for the div area and it makes reading much more difficult. How can I get a margin between them (apart from floating a transparent image to the right to create space, there HAS to be a better way)?
div.content { height: 100%; overflow: auto; margin:0 15px }
I might have misunderstood you though, post some HTML if I have.