I changed child div's position to absolute so that it can fill up rest of the page. But now it's width doesn't match with parent body. Code is not straightforward as I am using Angular 2.
index.html
<body>
<hp-root></hp-root>
</body>
app.html
<div>
<md-toolbar class="toolbar">
<img src="../assets/logo_3x.png" class="top-logo"/>
<a class="top-link">Home</a>
<a class="top-link">Candidates</a>
<a class="top-link">Jobs</a>
<a class="top-link">Blog</a>
<a class="top-link">Login</a>
</md-toolbar>
</div>
<hp-candidate-list></hp-candidate-list>
candidate-list.html
<div class="page">
<h1>
{{title}}
</h1>
<div class="items">
<md-nav-list *ngFor="let candidate of candidates">
<md-list-item>
<img src="../../../assets/reminder-active#3x.png" class="reminder">
<span class="name">{{candidate.name}}</span>
<span>{{candidate.experiences[0].title}} at {{candidate.experiences[0].companyName}}</span>
<span>{{candidate.skills[0].name}}, {{candidate.skills[1].name}}, {{candidate.skills[2].name}}</span>
</md-list-item>
</md-nav-list>
</div>
</div>
CSS:
body {
width: 960px;
margin: 0 auto;
}
.page {
overflow: hidden;
height: 100%;
position: absolute;
background-color: gainsboro;
}
div.items {
max-width: 90%;
position: relative;
left: 5%;
right: 5%;
background-color: #FFFFFF;
}
After adding the position: absolute .page div fills up rest of the page but looks like this:
Before width was fine but it's height wasn't filling up the page.
Once you set an element to position: absolute, that removes it from the normal content flow, the size of the the element will be the size of the content inside, unless to declare the width and height, or set relevant top, right, bottom and left values.
Example of making an position absolute element to take full width of the closest container with position set other than static, or if it sits directly under body tag.
.page {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
or
.page {
position: absolute;
left: 0;
right: 0;
top: 0;
}
EDIT
Example of making div main to fill entire height available by using flexbox.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.header {
background: gold;
}
.main {
background: silver;
flex: 1;
}
.footer {
background: pink;
}
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
Related
I have a section with a set height of 700px. Inside this section is a container, due to the contents inside the container the height exceeds 700px and the overflow is shown which is the desired effect. However, when I add another section below this one, the contents of the new section overlaps the overflown piece of the container.
<section class="info">
<div class="container">
<!--Some Content-->
</div>
</section>
<section class="text">
<!--Some Content-->
</section>
I've tried giving the container class a z-index of 1, and also giving the info section an overflow visible and a z-index of 1, but nothing seems to work.
Codepen: https://codepen.io/KevinM818/pen/EoybqZ
z-index will only work on an element which is positioned as absolute, fixed, or relative. You can extract the lightblue box and set it to position: absolute;, then set the z-index on both bg div and container div. Or you can set z-index: -1;" to thebgdiv and removepositionandz-indexfrom thecontainer` div.
* {
padding: 0;
margin: 0;
}
.info {
height: auto;
position: relative;
}
.bg {
height: 700px;
background: lightblue;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 0;
}
.info .container {
position: relative;
width: 100px;
height: 750px;
margin: 0 auto;
background: grey;
z-index: 1;
}
.text {
height: 500px;
background: green;
}
<section class="info">
<div class="bg"></div>
<div class="container">
<!--Some Content-->
</div>
</section>
<section class="text">
<!--Some Content-->
<h1>How do I stop this green from overlapping the grey container?</h1>
</section>
Adjusted:
I saw your comments on the other post. If you want the gray box overlaps on the green box, you can simply add position: relative; to info div in your original code.
* {
padding: 0;
margin: 0;
}
.info {
position: relative;
}
.info {
height: 700px;
background: lightblue;
position: relative;
}
.info .container {
width: 100px;
height: 750px;
margin: 0 auto;
background: grey;
}
.text {
height: 500px;
background: green;
}
<section class="info">
<div class="container">
<!--Some Content-->
</div>
</section>
<section class="text">
<!--Some Content-->
<h1>How do I stop this green from overlapping the grey container?</h1>
</section>
If you want the green text to be covered, then you'll have to allow section.info to be taller than 700px.
Give section.text absolute positioning at top=700px, remove the height constraint on section.info and give it a higher z-index, and it should work out.
Adjusted codepen: https://codepen.io/anon/pen/BJzJzE
I am using bootstrap, I wanted one div behind the other div, so used z-index en position: absolute and relative.
When doing this, every div under the div with z-index: 1 goes behind this div, while I want it to stay under it.
The div also becomes wider than the max-width when using 100%
<div class="row" id="MENUROW">
<div class="col-md-12" id="MENUCOLUMN"><h1>SHOP</h1></div>
</div>
<div class="row" id="MAINROW"> <!-- this has the background-image -->
<div class="col-md-12" id="MAINCOLUMN">
</div>
</div>
CSS:
#MENUROW
{
position: relative;
height: 80px;
background-color: transparent;
z-index: 2;
}
#MAINROW
{
position: absolute;
z-index: 1;
top: 60px; /*because there is 1 div above the menu div, this div needs to be just under that div, behind the menu div */
width: 100%;
background-image: url(../images/background.jpg);
background-size: cover;
}
when doing this the background image goes wider (to the right) than the width of the parent div.
https://jsfiddle.net/2cs60vrr/3/ example, just made the background red to show how wide it should be, the background image goes much wider
Point 1
You didn't used .container class in your HTML. Bootstrap has a structure to get it's maximum feature. You must need to use .container. Bootstrap structure is below:
<div class="container">
<div class="row">
<div class="col-*-*">
Your Content
</div>
</div>
</div>
Make your html as above to solve this issue.
Point 2
If you want not change your html, then use this code below to any .row to solve this issue.
margin-left:0;
margin-right:0;
I am sorry if we are unsure what you are looking for but is that what you want?
.grid {
margin: 0 auto;
max-width: 100%;
width: 100%;
background-color: #fff;
}
.row {
width: 100%;
margin-bottom: 0px;
display: flex;
}
#MENUROW {
position: absolute;
height: 80px;
background-color: red;
z-index: 2;
}
#MAINROW {
position: absolute;
z-index: 1;
top: 0;
width: 100%;
max-width: 1400px;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg);
background-size: cover;
}
https://jsfiddle.net/norcaljohnny/xt9c9d2r/2/
You should put the wrapper around the whole thing to position:relative;
And both rows to position:absolute;
That's it.
When using position:absolute; the block goes to the absolute top left corner of the closest parent html tag that has a position:relative;. If there is no parent with position:relative; your absolute positioned items go to the upper left corner of your screen.
(the first row is not a parent of the second, but they are siblings. The wrapper "grid" is the parent of the 2 rows)
<div class="grid">
<div class="row" id="MENUROW">
<div class="col-md-12" id="MENUCOLUMN">
<h1>SHOP</h1>
</div>
</div>
<div class="row" id="MAINROW">
<div class="col-md-12" id="MAINCOLUMN">
text
</div>
</div>
</div>
And CSS
.grid {
position: relative;
}
.row {
width: 100%;
}
#MENUROW {
position: absolute;
background-color: red;
z-index: 1;
}
#MAINROW {
position: absolute;
z-index: 2;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg);
background-size: cover;
}
Here is your updated example:
https://jsfiddle.net/2cs60vrr/6/
I'm trying to have an child element (something like a toolbar) of a parent element to be positiond on its bottom edge. The bahavior should be the same as using position fixed for the browser view.
I'm using absolute position right now. Everyting is perfect until the parent needs to scroll its content. Then the toolbar moves along with the rest of the parent's content.
Could somebody explain me why the toolbar moves?
Is it possible to achieve that task without need any javascript?
* {
box-sizing: border-box;
}
.container {
position: relative;
width: 100px;
height: 150px;
overflow-y: auto;
border: 1px solid black;
}
.mock {
height: 200px;
background-color: red;
}
.tool-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background-color: blue;
}
<div class="container">
<div class="mock"></div>
<div class="tool-bar"></div>
</div>
The toolbar is inside the scrollable area, that's why it scrolled. Try this code:
HTML
<div class="container">
<div class="scroll">
<div class="mock"></div>
</div>
<div class="tool-bar"></div>
</div>
CSS
div.scroll { /* style of .container to scroll */ }
I have found an interesting fiddle that may help you. They are using position:fixed and the divs are not nested:
http://jsfiddle.net/b2jz1yvr/
<div class="fixedContainer">
This is experimental
</div>
<div class="otherContainer"></div>
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
.otherContainer {
height:1000px;
background-color:#bbb
}
In the code sample I did:
reset all margins/paddings to 0
set body height to 100%
set flex container height to 96%
set flex container margin-top to 2%
Now this gives me a scroll on the body even if the flex containers height + margin-top only sums up to 98%, so my question is, can't I use margin-top is this way and where does the extra space come from forcing the body to scroll?
Setting the body to overflow:hidden removes the scroll, but that feels more like a band-aid and not considered as a solution (unless this is a "behavior-by design" which needs that in this case).
Edit
Ways like remove the margin-top on the flex container and then set a padding-top: 2%; on the body or use position: relative; top: 2%; on the container or with absolute: position; I can make it work as expected though, but the case here is why margin-top: 2% doesn't do it.
* {
box-sizing: border-box;
padding: 0;
margin: 0
}
html, body {
background-color: gray;
height: 100%;
}
.outer {
display: flex;
flex-flow: column;
margin: 0 auto;
height: 96%;
width: 50%;
margin-top: 2%;
}
.top {
background-color: lightgray;
}
.middle {
background-color: darkgray;
}
.the-rest {
flex: 1 0 auto;
background-color: lightgray;
}
<div class="outer">
<div class="top">
top
</div>
<div class="middle">
middle
</div>
<div class="the-rest">
content
</div>
</div>
This is because percentage margins are based on the width of the containing block / element...in this case, the body.
W3C Spec
MDN
A <percentage> relative to the width of the containing block. Negative values are allowed.
I usually use vh and vw on html and body. In this demo I applied vh only since it looked like a vertically oriented demo. I also make the body and html position: relative. With vw and vh there's a real measured length that other elements (children of ::root) can actually set their relative measurements of 100%. I use position: relative because it makes the html, body sit rigidly inside the view port and the viewport units keep the body, html on the edge at 100vh and 100vw.
UPDATE
I think this behavior is due to collapsing-margins So if there's an illogical margin-top behavior, keep that in mind. There are several very specific circumstances that result in this odd behavior and there are a few solutions as well. The solution for these circumstances are as follows:
body, html { height: 100vh; } /* no relative or absolute positioning */
.outer { min-height: 100%; margin-top: -2%; } /* It's explained that the positive numbered margin-top is not effective and yet the negative value works but not like a normal negative value!? o_0
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
position: relative;
background-color: gray;
height: 100vh;
}
.outer {
display: flex;
flex-flow: column;
margin: 0 auto;
min-height: 100%;
width: 50%;
margin-top: - 2%;
border-top: 0;
}
.top- {
background-color: lightgray;
}
.middle {
background-color: darkgray;
}
.the-rest {
flex: 1 0 auto;
background-color: lightgray;
}
.marker {
position: absolute;
outline: 1px solid red;
}
<span class="marker" style="top: 0; left: 0;">top:0|left:0</span>
<span class="marker" style="top: 0; right: 0;">top:0|right:0</span>
<div class="outer">
<div class="top">
top
</div>
<div class="middle">
middle
</div>
<div class="the-rest">
content
</div>
</div>
<span class="marker" style="bottom: 0; left: 0;">bottom:0|left:0</span>
<span class="marker" style="bottom: 0; right: 0;">bottom:0|right:0</span>
I'm working with absolute positioning within a relative div. The code is as such: http://jsfiddle.net/32mq5v6L/1/
HTML
<div id="container">
<div id="featured-posts">
<div class="slide"><img src="http://alien.devprose.com/starwars/wp-content/uploads/2014/12/star-wars-droid.jpg" /></div>
<div class="slide"><img src="http://alien.devprose.com/starwars/wp-content/uploads/2014/12/han-solo-1140x350.jpg" /></div>
</div>
<div id="other-content">
Other Content
</div>
</div>
CSS
#container { width: 100%; margin: 0 auto; background: #eee; }
#featured-posts { position: relative; width: 100%; height: auto;}
.slide { width: 100%; height: 20px; position: absolute; top: 0; }
#other-content { }
My problem is the other-content div appears underneath #featured-posts unless I apply a set height to that container, which I can't do since the goal is to make all of this responsive.
Where am I going wrong?
If you plan to have #other-content after positioned container, you will have to create new stacking context in order to move it above. One way to do it since it's not positioned is to set very little opacity:
#other-content {
z-index: 10;
opacity: .99;
}
Demo: http://jsfiddle.net/32mq5v6L/1/