Develop Reference

Pseudo element margin goes outside not inside [duplicate]

i have 2 divs and a dl:
<div id="wrap">
<div id="header">
<dl id="site_nav_global_primary">
and this is my style:
#wrap {
margin:0 auto;
width:100%;
min-width:760px;
max-width:1003px;
overflow:hidden;
}
#header {
width:100%;
position:relative;
float:left;
padding-top:18px;
margin-bottom:29px;
}
#site_nav_global_primary {
float:right;
margin-right:18px;
margin-bottom:11px;
margin-left:18px;
}
Now i want to change site_nav_global_primary to have a full screen width without
changing the wrap and the header. but when i try:
#site_nav_global_primary {
position: absolute;
width:100%;
top:0px;
left:0px;
}
The navigation gets the 100% of the wrapper which is max 1003px width. i want it to
stretch to the maximum without changing the wrap and header divs.
Is this possible?

You could set both left and right property to 0. This will make the div stretch to the document width, but requires that no parent element is positioned (which is not the case, seeing as #header is position: relative;)
#site_nav_global_primary {
position: absolute;
top: 0;
left: 0;
right: 0;
}
Demo at: http://jsfiddle.net/xWnq2/, where I removed position:relative; from #header

You need to add position:relative to #wrap element.
When you add this, all child elements will be positioned in this element, not browser window.

I have similar situation. In my case, it doesn't have a parent with position:relative. Just paste my solution here for those that might need.
position: fixed;
left: 0;
right: 0;

Adding the following CSS to parent div worked for me
position: relative;
max-width: 100%

Make #site_nav_global_primary positioned as fixed and set width to 100 % and desired height.

This one also works. With this method, there is no need to interfere with positioning of parent divs. I have checked
#site_nav_global_primary {
position: absolute;
width: 100vw;
}

I don't know if this what you want but try to remove overflow: hidden from #wrap

Expand the element's height to bottom of the page

I have a canvas in my page, and i want it to fill the page until it reaches the bottom of the page.
I have the canvas' width set to 100%, but i cannot set the height to 100% as it extends too far.
The position of the div is not 0,0 of the browser window there are other things above it, so i end up with a scroll bar because 100% height extends well below the bottom of my browser's output.
So i was wondering how can i extend the element's height to reach the bottom of the page from its current position on the web page?
<style>
.canvas{
position:absolute;
width:100%;
height:100%;
}
<style>
<div class="logo">Stuff here</div>
<div class="output">
<canvas class="canvas"></canvas>
</div>
Do i need to use JavaScript or is there a CSS method to doing this?

If you know the height of the content above the canvas, you can use top and bottom properties to take up the rest of the space:
JS Fiddle
.logo {
height: 40px;
}
.output {
position: absolute;
top: 40px; // height of above content
bottom: 0;
width: 100%;
padding: 0;
}
.canvas {
position: absolute;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
And if you don't know the height of the above content, you can calculate it:
JQuery Example: JS Fiddle
var height = $('header').height();
$('.output').css('top', height);

this technique is also great when making resizable popups with fixed height headers and footers, but fluid height content
https://jsfiddle.net/ca5tda6e/
set the header (.logo) to a fixed height
.logo{
height: 100px;
background-color: lightGray;
position: relative;
z-index: 1;
}
then position the content (.output) absolute, with a padding-top: 100px
.output{
width: 100%;
height: 100%;
box-sizing: border-box; /* so that padding is included in width/height */
padding-top: 100px; /* padding-top should be equal to .logo height */
position: absolute;
top: 0;
left: 0;
overflow: hidden; /* there was like a pixel of something i couldnt get rid of, could have been white space */
}

I've had this problem before, in CSS, create this rule....
html, body {
margin: 0;
}

covers another div with div height of 100%

I've been trying layout with css the div (dark blue) so that changes size according to the size of the window without covering the bottom panel, I thought that with the height to 100% official, but not understand because it ignores the panel below, and ends moving off the page
now that see not let me post pictures, so something is also what I have:
html:
<div id="container">
<div id="message">hi i'm a message</div><!--i can see this div-->
<div id="darkBlue"></div>
<div id="anotherPanel">you can't see me</div>
</div>
and this css
#container{//This container is attached to the right side
right: 0;
width: 300px;
position: fixed;
height: 100%;
top: 0;
color: white;
padding: 20px;
}
#darkBlue{//this div cover the next div
height: 100%;
border: 1px solid white;
background: #3a5193;
bottom: 100px;
}
#anotherPanel{//i can't see this div.......
height: 100px;
botton: 0px;
}
Not sure if you can solve with css, or have to resort to using javascript (which is something I want to avoid), anyone knows some property who can help me?
UPDATE: This is the picture of what layout attempt: https://www.dropbox.com/s/t9nl5mb3sq85m3j/repro.png

Using bottom top left right you must define position. In your case remove bottom from #darkBlue #anotherPanel and add to #darkBlue height: calc(100% - 100px)
DEMO
Update
If you don't want to use calc then add margin-bottom:-100px; to #darkBlue
DEMO

You have a typo in the CSS of anotherPanel. You have botton instead of bottom. Also when using this CSS properties, is good to set the position.
Try this:
#anotherPanel{
height: 100px;
width: 300px;
bottom: 0px;
background: #F00;
position:absolute;
}
Is this the droid you are looking for?
Best.

If you assign a height of 100% to a child element it will take up 100% of the height of the parent element. If you want the element to cover the whole container without being in the document flow of the parent element you can try to do the following:
#darkBlue {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #3a5193;
}
Edit: #Niels has mentioned an additional detail I've not mentioned before. For this to work the parent elements position needs to be set to either fixed, absolute or relative

Getting the footer on the bottom of the page

This dreaded problem.
What I currently have
html:
<html>
<body>
<div class="wrapper"></div>
<div class ="footer"></div>
</body>
</html
css:
* {
margin: 0;
}
html, body {
height: auto !important;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0;
}
.footer
height: 36px;
}
The problem is when i inspect the rendered page with chrome a few problems I see:
1. The html tag has a height associated with it hmmm and its not the entire page height
2. so I have div inside of the wrapper div that extends past the wrapper, body, and html tag?
My best guess is that if i can get the html to the page height I could style the footer to page bottom.
I was considering using javascript to grab the true height in pixels and passing that to height and ditching the percent. Only problem is I still want to know whats going on!
Thanks,
JT

add this css to your wrapper divs
wrapper_div{ overflow:hidden; }
this is a hack to recalculate floated elements inside an element. Otherwise the browser will forget about the floated elements, overflow-hidden does the trick or you can append a clear floated element to the bottom of the wrapper div like so
CSS
clear_float{
clear:both; display:block;
overflow:hidden; visibility:hidden;
width:0px; height:0px;
}
HTML
<div class="wrapperdiv">
/* other HTML elements*/
<div class="clear_float"></div>
</div>
this is assuming that the troublesome div is classed wrapperdiv
on second look this is completely invalid
html, body {
height: auto !important;
height: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
}
you are setting the height twice in one declaration. height: auto !Important will take precedent over height: 100% so you need to decide whether you want your height automatically rendered over explicitly at 100%.
and your missing the opening block in this css declaration
.footer
height: 36px;
}

Just before the closing tag of the wrapper add a div with the class 'clear'
CSS:
.clear { clear: both; }
.footer { margin-top: -36px; }
The problem is that floated elements behave like absolute positioned elements.. They are not taken in account when calculating the height of the wrapper div.

In the end I just made the html body tags set via pixels and not percent. Nothing I tried above satisfied me.

If you want a facebook like fixed footer status bar. Try using the following css:
.footer {
width: 100%;
height: 25px;
position: fixed;
bottom: 0px;

jQuery: Position a div to fill the visible portion of a container div with overflow

I'm having trouble getting an overlay to appear on top of the visible portion of another div. The problem is, the container div has overflow, and if the user has scrolled inside that div, the overlay will not cover the scrolled portion. My question is: how can you position a div to fill the visible portion of another div using jQuery - or, alternatively, is there a way to accomplish this using just CSS?
Here is a jsFiddle demonstration, and here's the markup:
HTML
<div class="container">
<div class="overlay"></div>
<div class="content">
<p>Content here</p>
<p>Overflow content here</p>
</div>
</div>
CSS
div.container { position: absolute; height: 100px; width: 100px; overflow-y: auto; }
div.overlay { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #F00; opacity: 0.5; }
div.content p { margin-bottom: 100px; }
and JS (load on DOM Ready)
$('div.container').click(function(){
$('div.overlay').toggle();
});

In order to achieve what you were asking for I did the following
CSS
.container {
/* setting this to relative means
overlay is positioned relative to its parent */
position: relative;
}
.overlay {
/* element taken out of normal flow */
position: absolute;
/* removed bottom and right properties otherwise
updating top property has no effect */
height: 100px;
/* When scrollbar appears width decreases to less than
100px hence having to set to 100% to allow automatic calculation */
width: 100%;
}
JavaScript
Using jQuery I now set the top property appropriately
$(".container").scroll( function( ) {
$(".overlay").css({ top: $(this).scrollTop( ) });
});
Fiddle here

Assuming you really want to cover only the visible portion:
http://jsfiddle.net/GNCaT/1/
<style type="text/css">
div.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
height:100px; /* fixed height, set by CSS or javascript, no bottom */
background: #F00;
opacity: 0.5;
}
</style>
<script>
$('div.container').click(function(){
$('div.overlay').css('top', $('div.container').scrollTop() + 'px').toggle();
});​
</script>
This will position the overlay to the top of the visible portion of the container.

You can use the DOM property scrollHeight :
$('div.container').click(function(){
$('div.overlay').css("height", this.scrollHeight).toggle();
});
http://jsfiddle.net/p6k2Z/1/
EDIT :
In order to just overlay the visible portion, you can use this :
$('div.container').click(function(){
$('div.overlay').css({
top: this.scrollTop,
height: $('div.container').css("height")})
.toggle();
});
http://jsfiddle.net/p6k2Z/3/