Is this possible using CSS only? I can't find a definitive answer anywhere!
It's for a left and right nav bar I'd like to stretch to 100% height; i.e. the end of the page. There are three floated columns contained within a floated container that stretches 100% height, I just can't get the childs to stretch...
http://www.dev.inside-guides.co.uk/brentwood/pages/links.html
Thanks in advance for any replies.
It can be done, if you set its parent div container position to relative as follows
#container {
position: relative;
}
and then set the div you want to be 100% and position absolute as follows
#inner {
height: 100%;
position: absolute;
}
this is how I've done it, hopefully I haven't missed anything :)
I had this problem before.
Try adding:
html{
height:100%;
}
Make sure the parent div has a set height and the div itself is also height:100%;
If you have any trouble let me know :)
Related
Struggling to figure this one out, any help is appreciated.
I've a main #wrapper div that wraps around the whole document. Then we have a #sidebar-wrapper for the navigation and a #page-content-wrapper for the content. The problem is that when the content expands the sidebar-wrapper doesn't. I know they are both absolutely positioned, I've tried relative positioning and that didn't work either.
The sidebar-wrapper div should expand down (height) to accompany the growth of the page-content-wrapper div.
I would appreciate any help. Thank you.
Here's the fiddle: wrapper fiddle
Found the SOLUTION: overflow-x on the page-content-wrapper should be set to hidden and that made the sidebar-wrapper expand to 100% of the document size.
Use position relative for outer wrapper like this:
#wrapper.toggled
{
padding-left: 250px;
overflow: hidden;
position:relative;
}
First off, here is a JSFiddle that represents the issue.
I am trying to have a "container" id that is the size of the entire viewport. This is so all div items in #container fit inside the page without scrolling. I assumed thats what height: 100% in html, body, and #container would do.
It seems though, that the .thirdwidth elements height is that of the full viewport, and is not just expanding to the bottom of the #container div (if you inspect the element, it appears that the .thirdwitdh elements go outside the #container)
Does anybody know why this is happening? I would like to be able to have all Sections 0-3 fit on the page without scrolling.
To achieve 100% viewport height you can try 100vh, but why are you placing it's position to absolute.
body {
margin:0;
padding:0;
}
#container {
height: 100vh;
width: 100%;
position:relative;
overflow:hidden;
}
Thanks to #Abbr for this answer (thought I would post a standalone answer so it's not hidden within the comments)
Due to the fact that the gameinfo id is 20% of the parent div, setting the .thirdwidth columns to 100% height made the entire page 120%
Changing the height of the .thirdwidth in my CSS to 80% fixed it!
I have a css animation, which makes a div go under another div. DIV 1 goes under DIV 2. If I make DIV 2 absolutely positioned, the page will break in pieces. But if I don't make the DIV 2 absolutely positioned, the DIV 1 will not go under it, buy stay at the top of the div.
You can check it out live here
This is how it looks without making the right content absolutely positioned.
If you hover your mouse over the map, you will see the transition.
Any helpful solutions of getting rid of this? I would really appreciate.
Thanks in advance.
That is why it don't work, your parent div has to have position to child div position take effect.
.div1, .div2{
position:relative;
}
.div3{
position:absolute;
}
Take a look here: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
Make Div 2 be position: relative so that it stays in the flow. See How to make div's percentage width relative to parent div and not viewport
From that answer:
Specifying position:relative; or position:absolute; on a node means that it will be used as the reference for absolutely positioned elements within it http://jsfiddle.net/E5eEk/1/
I managed to make it work:
#content {
position: relative;
}
.info {
z-index: 0;
position: relative;
}
To make the #content to be the top layer add z-index with a higher value with the other div.
Take note, z-index doesn't work if you don't set your div position:absolute or position: relative
#content {
position: relative;
z-index: 3;
}
I am trying to have an arrow fixed to the bottom of a div section , but for some reason its not working ,
here is my html code:
<section>
<div style="margin:auto; text-align: center; position:relative; width:61px">
<a class="scroller-arrow" href="#offset2"></a>
</div>
</section>
The CSS code :
section {
padding: 10%;
margin: 0 auto;
background-image: url("/images/text-bar-strip.png");
background-repeat: repeat-x;
height: 393px;
}
.scroller-arrow
{
background-image: url("/images/down-arrow.png");
cursor: pointer;
display: block;
height: 61px;
margin: 0 auto;
width: 61px;
position:fixed;
bottom:-11px;
}
its always showing at the bottom of my screen not the bottom of the section ?
Could you help me much appreciated :)
After clearing things up in the discussion, I believe this is what you're looking for: http://jsfiddle.net/WBF6s/
Changes include:
Removing the div.
Setting position:relative on the section.
Setting the a to be position:absolute and display:inline-block.
Setting the a to left:0, right:0, bottom:0, and margin:0 auto.
position:fixed, places the element relative to the window.
With position:absolute, the element will be moved relative to the nearest positioned parent, which means that the container must have itself a position property set.
What we usually do is make the container relatively positioned, by setting its position property to relative.
So, you should make your section or your div relative, and your arrow absolute.
as an FYI, position:fixed is reserved for placing an element on the screen regardless of the other elements there. It will fix itself to the window no matter what. If you would like it to be stuck at the bottom (or top or anything) of an element, you need to use position:absolute. The caveat with position:absolute is that you will always need its parent to have a position on it. The most non-destructive way is to give your parent position:relative and this will make sure that the parent is always in the same spot.
I've made a very quick jsfiddle to show you what's wrong:
http://jsfiddle.net/AuGe2/
When you want to position something to the bottom of an element, you need it to be
.arrow{
height:40px;
width:40px
position:absolute;
bottom:0;
left:50%;
margin-left:-20px //Or half the width of the element
}
Notice the left:50% and margin-left:-20px This is what centers an absolute element in a box. You are moving the element 50% of the way over of the parent's width, then you need to back-track a bit because it's moving the left-most side of the element. You backtrack by subtracting the same margin at half the size of the element. You can do the same with top as well.
An element is positioned absolutely and is made to full width using the left and the right properties set to 0
The problem is, when the window is zoomed, the element is made full width only to viewport. The below images explain the problem in detail
Is there any CSS hack to fix this issue.
JSfiddle to test: http://jsfiddle.net/vaakash/kdgJp/
You can do the following:
body {
position:relative;
float:left;
}
#header {
width:100%;
}
http://jsfiddle.net/PNaSz/
This will make sure the absolute element orients against the body in width (because its positioned relative), float:left will make sure the body is as wide as the content.
Is there a reason you can't use width: 100%;?