I have one element below another and I am using position relative to drag the bottom element up just a bit so that it overlays the top element.
The paperOverlay element is the last element on the page, vertically speaking, and I want it to extend to the bottom of the browser window. However, the relative nudging of the element's position leaves an equal amount of whitespace at the bottom. Is there any way to avoid this?
The HTML looks like:
div class="container">
<div class="homePage">
<!-- some content -->
</div>
<div class="paperOverlay" style="position: relative; top: -70px;">
<!-- some more content -->
</div>
</div>
And the CSS looks like:
div.container
{
width: 960px;
margin: 0 auto;
}
div.homePage
{
width: 800px;
height: 500px;
}
div.paperOverlay
{
width: 960px;
min-height: 400px;
background: url('Images/Overlay.png') no-repeat top center;
}
Basically, the bottom layer is a white background with a torn paper edge effect at the top. The goal is to have the torn paper edge slightly overlay the bottom of the element above it. I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Could you try a negative margin rather than relative positioning? Also, could you explain a little bit more why you need to do this and post you css so that we can better suggest a solution?
Try setting the height of the paperOverlay element. It should be the actual height minus the amount moved relatively.
I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Try this:
div.container
{
margin: 0 auto;
width: 960px;
}
div.homePage
{
height: 500px;
position: relative;
width: 800px;
z-index: 1;
}
div.paperOverlay
{
background: url('Images/Overlay.png') no-repeat top center;
min-height: 400px;
position: relative;
top: -70px;
/* you can optionally use bottom: 70px; rather than top: -70px */
width: 960px;
z-index: 2;
}
Using position: relative; on both elements and setting the z-index should get the overlay on top of the top element, rather than the other way around.
You may also want to try using display: block; on all elements where you need fixed width/height (especially divs and other containers that need a fixed width/height, like anchors or list items), to prevent collapsing. It will usually resize non-block-level elements to fit their contents and ignore width and height rules otherwise.
Using the "vh" unit worked for me. I could not get it to work with height: calc(100%-50px)
#main-nav{
width: 55px;
background-color: white;
transition: 400ms;
height: calc(100vh - 50px);
}
Related
I have issues with understanding the div position (relative, absolute, fixed) properties. I basically have an absolute div centered. Inside the div it should be possible to scroll vertically and horizontally. Inside this div should be a fixed header with a width larger than to screen (overflow) and a content div which has an overflow vertically and horizontally as well.
html,
body {
height: 100%;
width: 100%;
background: #fff;
margin: 0px auto;
padding: 0px auto;
position: fixed;
}
.container {
width: calc(100% - 20px);
height: calc(100% - 20px);
top: 10px;
left: 10px;
background: #2924aa;
overflow: scroll;
display: flex;
position: absolute;
z-index: 20;
}
.container-header {
width: calc(100%);
height: calc(10%);
background: #2924aa;
overflow: visible;
z-index: 10;
position: fixed;
background: red;
}
.container-body {
width: calc(110%);
height: calc(110%);
background: #2924aa;
overflow: auto;
position: absolute;
background: green;
}
<div class="container">
<div class="container-header"></div>
<div class="container-body"></div>
</div>
Here is my plunker:
https://plnkr.co/edit/wCWvHPcuYmVMql5HulHy
So i think the main question you have is in regards to the Position Attribute in CSS3. Below is a brief summary of each possible value.
CSS Positioning
The CSS positioning attribute of position has four different values.
Static - Static is the default value for position. It keeps the element on the page in its place, and it scrolls up the page as you scroll.
Relative - Relative positioning is pretty much as the same as static; however, you can use the left, right, top, and bottom attributes to alter the placement of the element relative to its original position.
Fixed - A fixed element's position is in relation to the viewport (i.e. the browser) therefore, an element with a fixed position does not scroll with the page, because when you scroll the viewport does not change. However, if you resize the browser, the element will change position.
Absolute - A element with an absolute position, is positioned relative to its parent element (i.e. the element that contains it).
A good resource for more information, including some diagrams can be found here.
In the following fiddle:
http://jsfiddle.net/6qF7Q/1/
I have a yellow content area that has a min-height set to 100% - it's the background div to all pages and should take up at least 100% of the available height. If there's overflow, it expands vertically.
Then, within that yellow container, I have another child div (red) that I would like to take up as much vertical space as its parent. It seems I can't set height because the parent element only has min-height, and setting min-height on the red element doesn't work either.
So right now, the yellow is behaving as I'd like, but the red is not expanding. How can this be achieved with CSS only?
CSS:
.browser {
background-color: blue;
height: 600px;
width: 200px;
position: relative;
}
.innercontent {
min-height: 100%;
background-color: red;
width: 100%;
color: white;
padding: 2px;
}
.content {
background-color: yellow;
width: 100%;
min-height: calc(100% - 30px);
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background-color: orange;
height: 20px;
}
HTML:
<div class="browser">
<div class="content">
<div class="innercontent">
This is the problem - I need this to take up 100% of the remaining yellow space, without setting the parent element's 'height' - only min-height is specified in the parent because I need to make sure that it takes up 100% of the height at least, but allow it to extend vertically if there's any overflow.
</div>
should not see any yellow
</div>
<div class="footer"></div>
</div>
Take a look at this
I added this
*{
box-sizing: border-box;
}
html, body {
/* Make the body to be as tall as browser window */
height: 100%;
}
and changed some attributes u can see at fiddle
If thats what you want you should read this article
http://css-tricks.com/a-couple-of-use-cases-for-calc/
I made that based in this use-cases
I think this might solve your issue?
I have changed the innercontent to position: absolute
http://jsfiddle.net/6qF7Q/7/
If you have text in the yellow section it will always show.
Also, you're going to have to do a bit of fiddling to get your footer positioned correctly since you are going to have an overflowing absolute element. I think a full body position: relative wrapper will solve it.
P.S I don't see why you would need a .content AND a .innercontent if you don't want the .content to show?
This works much better and doesn't give you footer grief: http://jsfiddle.net/6qF7Q/9/
I have a white page with only a 500x250 textbox and an image. The page is fluid.
I'm trying to center the textbox at the center of a page, while having a picture fixed to the bottom left of the screen. I partially achieve this with the following css:
.bottom-right { /* used to fix the image to the bottom of the screen */
bottom: 0;
right: 0;
position: fixed;
}
#content {
margin-left: auto;
margin-right: auto;
margin-top: 50%;
width: 500px;
height: 250px;
position: relative;
}
When I vertically resize the window, the image covers the textbox. I would instead like the text to go up.
If I've understood your question correctly, you need to have the "textbox" always over the image that's fixed on the bottom-right corner.
See this working Fiddle Example!
CSS
#content {
width: 500px;
height: 250px;
position: absolute; /* this is the key */
z-index: 1; /* this is the key */
left: 50%;
top: 50%;
margin: -125px 0 0 -250px;
}
CSS position:absolute;
What this does is to place the element #content outside the normal document flow, thus not being affected by other elements or having impact on the layout of later siblings.
CSS z-index:1;
What this does is to move the element up on the document stack, thus placing it over others with a lower value (the default stack level is 0).
See the CSS absolute and fixed positioning - W3C Wiki for further details.
Two options I can think of:
Use CSS media queries and if the viewport is less than a certain height then change the textbox height or position so the image doesn't cover it.
Set a min-height around the parent div and once its less than a certain height, show a vertical scrollbar.
I've made a menu strip that I would like fixed to the bottom center of the page. I've tried everything. Is there a way to do this in CSS? I've gotten the menu to be fixed at the bottom of the page with
bottom: 0px
position: fixed
but using
margin: auto auto 0px auto or margin-left: auto
doesn't seem to center the menu. It's just stuck to the left side of the page. Any thoughts would be greatly appreciated!
display: flex now makes this very easy! See below:
.footer {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
}
.content {
background: grey;
}
<div class="footer">
<div class="content">My bottom-fixed content</div>
</div>
With this solution, there is no need to set a fixed width which can be more flexible.
You can use a left property of 50% and a negative left margin equal to half the width of the footer.
http://jsfiddle.net/N7MB5/
#footer {
width: 600px;
position: fixed;
bottom: 0;
left: 50%;
margin-left: -300px;
}
To center an element you need to specify width and set left and right margins to auto.
Then to stick such an element to the bottom of the page you need to wrap it in another element which has fixed width, say 100% and is positioned on the bottom. And yes, css you can.
<section style="position: fixed; bottom: 0px; width: 100%;">
<p style="margin: 0 auto; width: 300px;">Blah blah</p>
</section>
#myElemId {
width: 100px;
}
Note the fixed width; this is essential for margin: auto to work. If this doesn't solve it, then there must be a problem elsewhere.
Edit: You'll also need this (jQuery):
$("#myElemId").css({
left: window.innerWidth/2 - $(this).css("width")/2
});
This allows you to set the width to whatever you want without having to update the rest of the CSS code.
I have a container div, within that div are other div's. In there I use jQuery .show() to show stuff.
#container {
position: absolute;
width: 600px;
left: 50%;
margin-left: -300px;
background-color: white;
height: 100%;
}
#content {
font-size: 15;
margin: 0 auto 0 auto;
width: 550px;
}
The content div grows longer than the container div, so the white background stops when I scroll down, leaving me with no white background there.
How can this be fixed?
http://jsfiddle.net/K6PAn/8/
I think this will be your answer, Adding padding to the top and bottom will always make the white shown.
Hope this helps, If it's not the correct answer, sorry! D:
Add an extra div at the end of the content with clear:both e.g.
<div style="clear:both"></div>
Dave