I have a notifications panel which I would like to take up the whole of the body without having to specify hard coded values such as height: 100px;. I need it to take up all of the space until it reaches the footer. ViewHeight does not work as it pushes the footer off the page which is not my intended actions. So far I have this:
https://jsfiddle.net/bfbfvop4/2/
Can anyone help?
I'm not sure what you exactly want but mybe this helps.
There's a trick in css for this:
html,body{
height:100%;
width:100%;
margin:0
}
div{
height:100%;
width:100%;
background-color:black;
}
<html>
<body>
<div>
</div>
</body>
</html>
You just have to set html and body to height and width 100%. margin:0 is there just for the body (usually it has a margin of 2-4 px). Then you can make any 'relative' element full-body size.
EDIT 1: As #str ,after you write this code you can use 'calc(100% - ' if you want some space left.
EDIT 2 : Is this what you want? JsFiddle
The style is mostly in html (with style='' attrb.). I had to use calc so that you can see the footer too.
'Holder' must have the height 100%.
Delete min-height from 'class="container-fluid body-content body"' and replace it with 'height: calc(100% - 77px);' (100%-full screen ;77px is 75px -nav height and 2 px for border). Make the footer realtive and delete 'left:0' and 'bottom:0'. Then set row's properties to
position: relative;
height: calc(100% - 77px);
(100% from its parent height -77px from height+border of the footer)
Worked out the answer thanks to #str and #sergiu reznicencu.
So what I did was calculate the height I wanted by doing this calculation:
height: calc(100vh - height of my navbar - height of my footer);
I then set the height for the body and panel to be this variable.
I used sass but you don't need sass to do this, just follow the above way.
OR height: 85vh worked fine too.
Try this,
.notifications {
padding-right: 0px;
height:300px;
}
.notifications .notifications-panel {
height:100%;
background-color: #F5F5F5; }
Related
Beginner trying to understand the height property. Let's say I start with the following basic css and html, setting the hight of the .hero div to 100%:
html,
body {
height: 100%;
margin: 0px;
text-transform: uppercase;
}
.hero {
height: 100%;
background-color: blue;
text-align: center;
color: #FFF;
}
.normal {
background-color: red;
text-align: center;
}
h1,
h2 {
margin: 0px;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div class="hero">
<h1>100% Heroic</h1>
</div>
<div class="normal">
<h2>Normal Div</h2>
</div>
</body>
</html>
So there are a couple of things that I don't understand here:
What does it mean to set <html> height to 100%? As the root element, how is its height calculated? MDN says: "A percentage height on the root element is relative to the initial containing block." However, I have no idea what the "initial containing block" would be for the <html> element.
So in the snippet above, I have set <html>, <body> and .hero to 100%. As I understand it, height is calculated with reference to the parent (except for the wrinkle specified in item 1 above). So if the .hero div is taking up 100% of <body>, how is there room left over for the .normal div? Does <body> automatically expand? If so, does this mean height: 100% with respect to .hero just means "This class will take up as much of the parent element as possible, but if there's more content in the parent, we'll have to make a little room for it as well." In other words, not quite 100%?
Any help understanding these concepts would be appreciated!!
If your using percent to measure something it is nearly always in respect to something else right?
The easiest way to think about height:100%; is to start with the window and work your way in.
Now in the above example, if the height of each of element is set to 100%. Each element will be the full height of the window.
If you you have Element-Overflow pun intended, as in elements are being pushed down due to the height of the elements above them. That does not change the height of the body, html or whatever parent element. The best way to see that is with a border and/or overflow:hidden;:
html, body{
height:100%;
padding:0;
margin:0;
/*overflow:hidden; add and remove overflow to see what I'm talking about*/
border:2px solid red;
}
.hero{
height:100%;
}
h1{
margin:0;
padding:0;
}
<div class="hero">
<h1>100% Heroic</h1>
</div>
<div class="normal">
<h2>Normal Div</h2>
</div>
So the height isn't really going over 100% you just have some overflow. Note that the body, html, and #hero are still only as tall as the window.
The body tag can be set to 100% so any styles applied to that parent tag will be applied at a height of 100% (i.e a background-color/image). If there is other content on the page, the content will take up it's own space and the body element will adjust as needed.Essentially, when an element is set to a height of 100% it will take up 100% of allotted space, in respect to other elements on the page. Hopefully this helps answer your question.
If there is no other content or no parent element, the browser window is used to determine the height/width.
I'm stressing out because of a mindbreaker and I'm probably missing some essential, but easy thing.. And although I've done this many times before.. it's going wrong now.
So I'm creating a web app and always my starting point is
html, body {
height:100%;
width:100%;
}
And some of my inner elements have a set height in percentages and some in pixels.
However, to have some structure in my code, I'm setting up div's without a set height. Let's set up the following situation.
HTML
<div class="wrapper">
<div class="thisIsAStructureItem">
<div class="innerElement">
And just some untagged piece of text
</div>
</div>
</div>
CSS
.wrapper {
height:100%;
width:100%;
}
.thisIsAStructureItem {
/* nothing, not even height */
}
.innerElement {
height: 17.5%;
}
But in any editor or browser, because I haven't set a specific (%/px) height on the second element, it shows up as 0px, including all the inner elements.
So stupid as this might be.. What am I doing wrong?
UPDATE: See this JSFiddle
The situation makes it appear a set height is necessary, therefor so my title. Feel free to adjust to something more suitable
The situation above is a replica of a to-build-situation and using exact pixels is (at that above part) not an option. Please don't advice 'use X pixels'.
Original: http://jsfiddle.net/o0Lfyt0m
Updated: http://jsfiddle.net/o0Lfyt0m/1/ (from code sample below)
The innerElement is trying to display as 17.5% as tall as the parent element. The problem is that the parent element does not have a defined height. As a fall back to calculating 17.5% of undefined, the div's height is essentially defaulting to "auto" and assuming the height of it's content, which is based on the size of the font, line-height, padding etc.
Edit: A nice feature of CSS is that an elements styles can be inherited from it's parents. You can add a structure class which will inhert the height from it's parent element, which seems to be your intent.
You could even add this class to the body element, since it's height and width are identical to html... just not certain if the HTML element can be styled in all browsers, so I didn't do that.
html, body {
height: 100%;
width: 100%;
}
.wrapper {
height: 100%;
width: 100%;
}
.struct {
height: inherit;
width: inherit;
}
.innerElement {
height: 17.5%;
}
<div class="wrapper">
<div class="struct"> <!-- .struct inherits height/width from .wrapper -->
<div class="innerElement"> <!-- height calculated based on .wrapper -->
And just some untagged piece of text
</div>
</div>
</div>
Yes, you need to set the height 100% for that div too. Otherwise it's height is unknown and will not be able to take exactly the 100% height and innerElement height is not calculated accordingly.
To make sure, you must use the height 100% for that div too.
.wrapper {
height:100%;
width:100%;
}
.thisIsAStructureItem {
height: 100%;
}
.innerElement {
height: 17.5%;/* calc from it's parent div height i.e. thisIsAStructureItem*/
}
You are, in effect, asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing.
Say, for example, I have two divs like so:
<body>
<div id="header">
MY CONTENTS
</div>
<div id="main">
MY OTHER CONTENTS
</div>
</body>
The first div has the attributes position:fixed; and width:100%; in CSS, the other div is just a div with much content inside.
Ok, there is a scrollbar in the right side, as usual. But this scrollbar affects all of the divs. I want the scrollbar to only affect the second div, is possible?
I tried everything with overflow:auto, overflow:hidden, and overflow:scroll but I didn't reach my goal...
EDIT: Here my jsfiddle: http://jsfiddle.net/upcfp/
Do you want to do something like that?
jsfiddle Example 1
I edited your jsfiddle and removed some of the not needed parts for your question:
edited version of your jsfiddle
seems like there was a
</div>
missing in the #header, but is that what you wanted to get?
Is this what you had in mind?
This is a simple method. I have the header at the top, absolutely positioned, at a height of 100 pixels. Below that, I have the main content area, which has a height of 100%, a transparent top border of 100 pixels (so the content appears below the absolutely positioned header).
The box-sizing property in CSS allows us to fit the entire element into the width and height we specify, including padding and borders. So including the top border, the height of the main content is 100%, and the scrollbar appears only on the main content div.
The trick here, by the way, is setting the height of both html and body to 100%. This wouldn't work otherwise.
CSS:
html,body {
height:100%;
}
#header {
position:absolute;
width: 100%;
height: 100px;
background:#c3c3c3;
z-index:1;
}
#main {
background: #eee;
height:100%;
border-top:100px solid transparent;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
overflow:auto;
}
Here is your fiddle using my solution.
Try:
#div2 {
overflow-y: scroll;
}
That will only put the scrollbars when needed. To always display them use overflow-y: scroll;. I had prefixed the second div's ID with div as you should not use only numbers for IDs or attributes in general.
The # signifies that the rule will apply to an element with the ID that follows the #. If you wanted it applied to all div then you would use a class instead.
Demo: http://jsfiddle.net/6EVtN/
Without seeing more code, the issue could be due to browser compatibility. Example above was tested in Mozilla Firefox 13.0.1 and IE 8.
Updated Demo: http://jsfiddle.net/j4uAM/
Ok, I solved my problem, I used this code:
body{
overflow: hidden;
}
#main{
overflow: scroll;
}
#maincontent{
height: 1500px;
}
I specified the height in content of #main and it just worked, thanks to everybody!
This a perfect solution, but I don't know how to keep code format in stackoverflow:
<script>
$("#cart").bind("mousewheel", function(e){
var intElemScrollHeight = document.getElementById("cart").scrollHeight;
var intElemClientHeight = document.getElementById("cart").clientHeight;
if( intElemScrollHeight - $("#cart").scrollTop() === intElemClientHeight) {
$(document).bind("mousewheel", function(event) {
event.preventDefault();
});
}
if(e.originalEvent.wheelDelta /120 > 0 ) {
if($("#cart").scrollTop() != 0) {
$(document).unbind("mousewheel");
} else {
event.preventDefault();
}
}});
$("#cart").on("mouseleave", function(event) {
$(document).unbind("mousewheel");
});
</script>
I'd like a table created with DIV, this table has 2 fixed columns (that it's ok) but the both columns must have all the time the same height.
The code can be find here : Code on Fiddle
The code :
<style type="text/css">
#container
{
position:relative;
width:100%;
margin:0 auto;
}
#header {
background-color:#5a7fa9;
}
#center {
overflow:hidden;
width:100%;
}
#left {
float:left;
width:200px;
background-color:Gray;
}
#content {
margin-left:200px;
background-color:#a9bbd1;
}
#footer {
background-color:#95adc9;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="center">
<div id="left">left</div>
<div id="content">content<br/><br/></div>
</div>
<div id="footer">footer</div>
</div>
ther is an example
http://jsfiddle.net/amkrtchyan/dLeWA/9/
Hi i would like to explain the answer given by Howdy_McGee ..
Add min-height: 100px to #center
Add height: 100% to #left
Add height: 100% to content
he explained the above change which is completely correct.
Seeing your code in jiddle you havent wrote height anywhere in your css style. Therefore all your containers will take height:auto as per the content into it.
you have a div with id='center' this div should have some min-height:100px; and both the inner container should have height:100% by this your elements inside the center div will take height of their parent.
I had preferred you to give the min-height:100px because incase you are putting in dynamic content inside your inner boxes height should increase automatically, therefore if you do not have any content into your div height will stick to 100px.
Hope my explanation makes sense because i am in a bit hurry to type.
You can use this dirty hack (only adding this css):
#center > div {
margin-bottom: -2000px;
padding-bottom: 2000px;
}
Also see your updated example.
=== UPDATE ===
I'll try to explain it:
The padding-bottom uses the background-color. It has to be a heigh value (the minimum different height between the lowest and heighest column). So each column in the center-div add the background-color at the bottom. The negative margin-bottom sets the height back to it's real height. (The entire content is also be visible, even if the minimum height isn't large enough.)
I have a problem with my HTML/CSS webpage. I want to have this layout:
http://img227.imageshack.us/img227/9978/layoutw.png
But all what I get is a layout in which the areas are only as high as the content is.
Here you can see my website: http://ud05_188.ud05.udmedia.de/spotlight/jquery.html I tried several work-arounds, but it does not work.
What's the best way to solve this?
you can use the following code
html
<div id="wrapper">
<div id="left"></div>
<div class="right">start of top</div>
<div class="right">start of bottom</div>
</div>
css
html, body {
height:100%;
}
#wrapper {
height:100%;
overflow:hidden;
}
#left {
height:100%;
width:50%;
background:#09F;
float:left;
}
.right {
height:50%;
width:50%;
float:left;
background:#69a;
}
live example: http://jsbin.com/idozi4
What you're looking for is an adaptation of the Holy Grail method. In this case, #list1 is the 'left' column (as described in that article) and the rest goes into the 'center' column, so that means you can leave out the 'right' column altogether.
Basically something like:
<div id="container">
<div id="left">
#list 1 contents
</div>
<div id="center">
<div>
#list2
</div>
<div>
#data
</div>
</div>
</div>
#container {
padding-left: 200px; /* LC width */
}
#container > div {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
}
Heights will always be tricky... some solutions call for using explicit heights, but then if your content ever gets bigger, it'll overflow and look nasty, or worse, overflow and be inaccessible to the user.
You can use min-heights to display a best-case scenario, in which if the content needs to be taller, the minimum requirement will allow the div to stretch. You can use absolute positioning to get the layout that you want, but then the divs wont be flexible enough to accommodate content. You can use overflow: scroll to allow the divs to act like frames, but that is usually more annoying and messy-looking for the user.
I'd say use the above holy grail method to lay the containers out, and then use min-height for a best case scenario layout.
If none of those solutions are good enough, then there are also plenty of blog posts out there from experts about how to get equal height columns more consistently.
By default, giving something height: 100% will make the item as big as the item that contains it. This works for, say, divs within divs, but not for divs directly within the body tag. For this to work you need to set the height of the body element. Like so.
html, body{
height: 100%;
}
Hope this helps.
Update:
I think you are having trouble because you are trying to do two things which are tricky with CSS: fixed-to-bottom-of-page footers and 100% height. I think you will have to change the way that your footer works in order to get the 100% height working.
I haven't got a complete solution but I have made an example page:
http://deviouschimp.co.uk/misc/stackoverflow/columntest.html
That should sort out your 100% height issues. The footer doesn't always match the bottom of the content (#wrap height:94% gets it close, but it's not perfect).
This sticky footer technique should sort the rest out: http://www.cssstickyfooter.com/
Good luck!