is there any way to make single page website without position absolute? Because when I want to variable height of containers, absolute position is little bit awkward. I mean when I insert more content to one container, the other above it should move down. I've tried position static and relative, but it didn't work for me.
Now my css looks like:
<style>
#header {position: absolute; top: 0; left: 0; width: 100%; height: 20%;}
#main {position: absolute; top: 20%; left: 0; width: 100%; height: 80%;}
#about {position: absolute; top: 100%; left: 0; width: 100%; height: 100%;}
#contact {position: absolute; top: 200%; left: 0; width: 100%; height: 50%;}
</style>
<body>
<div id="header">
content....
</div>
<div id="main">
content...
</div>
<div id="about">
long content which is covered with next div, because its "top" atribute settings
</div>
<div id="contact">
div which covers previous one's end
</div>
But when some container needs to be longer, problem is here..
Thanks for any help!
That depends on the style of your website. Of course you can set up anchors and have a one-page scrolling website, but I don't think that answers your question.
My suggestion is to try using absolute positioned elements as containers, and have your actual template inside them.
It would help if you provided some actual code or a specific issue you're having, as it's currently too vague.
I'll provide an answer to what I think you might be asking, though it isn't clear. I hope this isn't too basic.
Ditch the position property altogether.
Just have a div (which is by default 100% width) as your header at the top of your html. The content should be in another div below that.
Divs by default have 100% width, and their height is dependent on the height of their content. They will grow to accommodate taller content. These behaviors are because they have the property display:block .
You've used % which, if I remember correctly, is relative to the parent element. vh (viewport height) is relative to the height of the screen (100vh is the full height of the screen).
I added the background-color just so it's easier to see.
<style>
#header {
background-color: #777;
height: 20vh;
}
#main {
background-color: #999;
height: 80vh;
}
#about {
background-color: #777;
height: 100vh;
}
#contact {
background-color: #999;
height: 50vh;
}
</style>
Related
I have a fixed DIV. The page contents should be displayed after the DIV, but they are under the DIV - partially hidden by it. How can I avoid this?
Here is the DIV's style:
#top_div {
position: fixed;
float: left;
top:0;
width: 100%;
height: 20%;
background-color: black;
}
we do not know your entire code, but if it is like
<div id="container">
<div id="fixed">fixed</div>
//a lot of html code here
</div>
put some top-padding to the .container div, padding equal to the height of the fixed div
Take a look at this.
Fixed Div
HTML:
<div>Fixed div</div>Can we see this?
CSS:
div {
position: fixed;
}
Now without fixed
HTML:
<div>Not Fixed div</div>Can we see this?
CSS:
div {
}
Just to show you what the difference is. You can see the div as position: fixed is sitting on top of the content after. The div will stay in that place always on screen. Thats what fixed does. You do not want this (I don't think as you didn't explain what you want it to do) so just remove it.
Example of position:fixed working on a page that can scroll, you will see it is always on the screen.
Example Here
Do not used fixed as this is what causes the problem for you.
I think you are trying to achieve this (http://jsfiddle.net/6Q9w4/8/)
.header {
height: 20%;
background-color: #4679bd;
position: fixed;
width: 100%;
}
.content {
position: absolute;
top: 20%;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
overflow: scroll;
}
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 want to have a site that is 100% of the height of the browser at all times, with the width scaling with an aspect ratio when the height is changed.
I can achieve this using the new vh unit: http://jsbin.com/AmAZaDA/3 (resize browser height)
<body>
<div></div>
</body>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
div {
height: 100%;
width: 130vh;
margin: 0 auto;
background: #f0f;
}
However, I worry about fallback for IE8 and Safari, as it this unit is not supported there.
Are there any other CSS only methods of achieving this effect?
I have a solution that works also with IE8 (using Pure CSS 2.1), but not perfectly.
because I need the browser to recalculate things when he get resized, and apparently it doesn't do that unless he has to (and I cant find a way to make him think he has to), so you will have to refresh the page after resizing.
as far as I know, the only element that can scale reserving his ratio is an <img>, so we will use the <img> to our advantage.
SO, we are going to use an image with the ratio that we want (using the services of placehold.it), lets say we want a 13X10 ratio (like in your example), so we'll use <img src="http://placehold.it/13x10" />.
that image will have a fixed height of 100% the body, and now the width of the image scales with respect to the ratio. so the width of the image is 130% height of the body.
that image is enclosed within a div, and that div has inline-block display, so he takes exactly the size of his content. witch is the size you want.
we remove the image from the display by using visibility: hidden; (not display:none; because we need the image to take the space), and we create another absolute div, that will hold the actual content, that will be right above the image (100% width and 100% height of the common container).
That works perfectly when you first initiate the page, but when you resize the page, the browser doesn't always measure the right width and height again, so you'll need to refresh to make that happened.
Here is the complete HTML:
<div class="Scalable">
<img class="Scaler" src="http://placehold.it/13x10" />
<div class="Content"></div>
</div>
and this simple CSS:
html, body, .Content
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body
{
text-align: center;
}
.Scalable
{
position: relative;
display: inline-block;
height: 100%;
}
.Scaler
{
width: auto;
height: 100%;
margin-bottom: -5px;
visibility: hidden;
}
.Content
{
position: absolute;
top: 0;
background-color: black;
}
Here's a Fiddle (don't forget to refresh after resizing)
I recommend you to copy this code to your local machine and try it there rather then within the fiddle.
In this similar SO question a CSS technique was found and explained on this blog entry that allows an element to adjust its height depending on its width. Here is a repost of the code:
HTML:
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>
CSS:
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}
Demo Here
If this is sufficient for you, I'd recommend this technique. However, I'm unaware if the technique can be adapted to handle scenarios where you must have an element adjust its width depending on its height.
You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the element.
CSS:
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
So I have three div's
One parent and two child.
The parent is as follows:
#parent {
overflow:auto;
margin: 0 auto;
margin-top:37px;
min-height: 100%;
width:875px;
}
the two child divs are as follows
#child1 {
overflow:auto;
min-height:150px;
border-bottom:1px solid #bbb;
background-color:#eee;
opacity:0.4;
}
#child2 {
height:100%;
background-color:white;
}
The parent div extends 100% as I can see the borders of it till the end of the page but the child2 is not extending down to the end of the page like the parent div.
height doesn't behave the way you seem to be anticipating. When you specify height: 100% that percentage is calculated by looking up the DOM for the first parent of said element with a height specified that has absolute or relative positioning.
You can cheat when it comes to the body tag, so if you had something like this:
<body>
<div style="height: 100%">
</div>
</body>
Some browsers/versions will behave the way you expect by taking up the total height of the page. But it won't work when you go any deeper than that.
Here is the approach I use to strech a div to the bottom of the page, it involves absolute positioning (nice thing about this one is that it is pretty cross-browser compliant and doesn't require javascript to pull it off):
<div id="parent">
<div id="childNorm"></div>
<div id="childStrech"></div>
</div>
#parent
{
position: absolute;
width: 1000px;
bottom: 0;
top: 0;
margin: auto;
background-color: black;
}
#childNorm
{
position: absolute;
width: 1000px;
top: 0;
height: 50px;
background-color: blue;
color: white;
}
#childStrech
{
position: absolute;
width: 1000px;
top: 50px;
bottom: 0;
background-color: red;
color: white;
}
Here is a Jsfiddle for demo: http://jsfiddle.net/t7ZpX/
The trick:
When you specify absolute positioning and then put in bottom: 0; that causes the element to stretch to the bottom of the page; You just have to worry about positioning the elements as a trade off.
Yes, this is one of the annoying things in css. min-height is not considered a "height" for purposes of calculating height. See http://jsfiddle.net/3raLu/3/. You need to have height: 100% on the parent div to make the child full height. Or, if you can have it be absolutely positioned, then this works: http://jsfiddle.net/3raLu/6/.
I am trying to emulate a sort of pop-up help dialog for my web site.
When the user clicks help, a mask covers the whole page with a dark, partially transparent mask, and a helppage div with a higher z-order is made visible.
The helppage div is 80% wide and 90% high positioned absolute at left 10% and top 5%, all relative to body.
So far all is great.
The content of the helppage div is:
- a full-width header with a close anchor 20px high floating right.
- a iframe-div to occupy the rest of the helppage div containing:
- an iframe to display the html document in question
The problem:
I would expect the height of the iframe-div to be 20 px less than the helppage div, but for some odd reason it is 3px larger than the helppage div.
As a result the bottom of the iframe is invisible.
The html:
<div id="helpbox">
<div id="helppage" class="window" style="display: block; position: absolute;">
<div class="hd-header">
<a class="close" onclick="hidehelp()"></a>
</div>
<div class="iframe-div">
<iframe id="HelpPageFrame" src="/help-system.html"></iframe>
</div>
</div>
The css:
#helpbox .window {
position:absolute;
display:none;
z-index:9999;
}
#helpbox #helppage {
background: white;
width:80%;
left: 10%;
top: 5%;
height:90%;
padding: 0px;
overflow: hidden;
}
#helppage iframe {
border: none;
width: 100%;
height: 100%;
}
#helppage .iframe-div {
width: 100%;
position: relative;
display: inline-block;
}
#helpbox .hd-header {
height: 20px;
font-weight: bold;
overflow: hidden;
display: inline-block;
width: 100%;
}
#helpbox .close {
width:20px;
height:20px;
display:block;
float:right;
clear:right;
background:transparent url(images/close_icon_double.png) 0 0 no-repeat;
}
Any suggestions would be greatly appreciated
edit As mixel pointed out, an important detail slipped, when I trie to simplify the scenario, that has been corrected.
Please, be accurate, when you are asking questions.
There is whitespace in '#helppage .window' selector. It selects nothing. Because of that '#helppage' is not absolute positioned.
There is no '#helpbox' element.
edit
Though you are still a bit innaccurate (you forgot to close 'DIV'), there is answer. You need to fill the remainder of '#helppage' with '.iframe-div'. If you set '.iframe-div' height to 100%, it takes 100% height of parent element - '#helppage'. To solve this problem you need absolute positioning for '.iframe-div':
#helppage .iframe-div {
position: absolute;
top: 20px;
bottom: 0;
right: 0;
left: 0;
}
Or set height with javascript.
Check out this: Make DIV fill remainder of page vertically?
It's fairly common question.