I'm trying to create my first web page. But I have a problem, I searched a lot about it but I still cannot solve it. So, the problem is, that my div (which is something like a background for the left side of the page, it has no content, only coloured background) is not stretching to the bottom of the page, it just stretches to the bottom of the screen, so when I scroll down the div is missing from there.
It looks like this (http://postimg.org/image/aiiabtue1/)
HTML:
<body>
<div class="left_strip"></div>
</body>
CSS:
.left_strip {
position: absolute;
left: 50%;
width: 203px;
height: 100%;
top: 158px;
background: rgb(251, 236, 236);
margin-left: -500px;
}
Use position: relative on the body tag and bottom: 0 instead of height: 100% on the .left_strip.
With just position: relative on the body tag the element will be 100% height, but because of the 158px distance from the top the bottom will be 158px below the content.
bottom: 0 will fix the bottom of the element to the bottom of the closest "positioned" (relative, absolute, fixed) parent element.
body {
position: relative;
}
.left_strip {
position:absolute;
width:203px;
top: 158px;
bottom: 0;
background-color: blue;
}
.content {
height: 2000px;
background-color: red;
margin-left: 250px;
}
<div class="content"></div>
<div class="left_strip">Test content</div>
Instead of using % try using the exact pixel value of the body tag.
What also might help is using a % value that is higher than 100, this also seems to work in testing.
Related
I have a page that does not fit inside the browser window so the user has to scroll to the bottom.
I want to make a div that is 50vh from the bottom, but if I do this:
.test{
position: absolute;
bottom: 50vh;
}
Then it just makes it so that when the page loads it is 50vh from the bottom of the window, not 50vh from the bottom of the entire page, which extends past the window. How would I make a div that is 50vh from the bottom of the entire page?
Thanks.
You can set the body to have position relative. As long as the test element is a direct child it should work.
Here's the code to test:
body {
position: relative;
}
.pusher {
height: 1000px;
background: red;
}
.test {
height: 50px;
background-color: green;
bottom: 50vh;
position: absolute;
left: 0;
right: 0;
width: 100%;
}
<div class="test">
</div>
<div class="pusher">
</div>
And here's a link to the fiddle to play with it:
https://jsfiddle.net/v0kt9hnj/4/
Using the CSS property 'position', how would it be possible to make a div inside another div always 100% height of the parent div, with a margin of 40px on the top and on the bottom? It needs to be adjusting, so that if the parent div is 700px in height, the child div will be 620px (700px - 80px from margins). Here is an example of what I mean:
Here the parent div (green) is tall, so the child (orange) must stretch to fit the space.
And here the parent (green) is squashed, so the child (orange) must compensate by squashing itself to fit.
Thank you in advance.
Edit:
Here is the html Im working with:
<div id="center-page">
<p id="center-page-title">Blog</h1>
<div id="content">
</div>
</div>
Try this:
#center-page {
position: relative;
background: green;
height: 700px;
}
#content {
position: absolute;
background: orange;
top: 40px;
bottom: 40px;
left: 0;
right: 0;
}
<div id="center-page">
<p id="center-page-title">Blog</h1>
<div id="content">
</div>
</div>
You can try absolute positioning with top and bottom values. Something like this:
#child{
position: absolute;
top: 40px;
bottom: 40px;
left: 0;
right: 0;
background: blue;
}
Here is an example:
https://jsfiddle.net/Lys72mgy/
I have a div with some text on my page, and I want it to be at the bottom. I did this using fixed positioning:
div#popup{
position: fixed;
bottom: 0;
But I also want it to be centered. I tried giving it a width of 40% and auto margins, but that doesn't work (it doesn't work with the combination of the above code) :
div#popup{
position: fixed;
bottom: 0;
width: 40%;
margin-left: auto;
margin- right: auto;
How can I achieve this?
Thanks.
If you know width of div you can use negative margin-left for horizontal position (which equals half of width).
div {
position: fixed;
bottom: 0;
left: 50%;
width: 40%;
height: 30px;
margin-left: -20%;
background: blue;
}
JSFiddle
If you don't know width, just use wrapper and inline-blocks:
HTML:
<section>
<div>la-la-la</div>
</section>
CSS:
section {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
div {
display: inline-block;
border: 1px solid red;
color: red;
}
JSFiddle
I encourage You to check two nice tutorials (quick read):
http://www.barelyfitz.com/screencast/html-training/css/positioning
http://learnlayout.com/position.html
I think You need to describe position like this:
div#popup{
position: fixed;
bottom: 0;
right: 50%;
}
First off, you should never use fixed positioning to get your footer to stick to the bottom. To get the footer to stick to the bottom of the screen, set all your divs to relative, then add an extra div the same height as the footer (set a height for your footer) between the content and the footer. Then put a margin of negative that height on your content div. Works perfectly.
To centre it, use width auto and margin left and right auto or just use text-align center
I'm trying to make some header for my website and another div below it, to contain a colored rectangle. Is it possible? I tried it like this so far, but no luck:
.logo {
width: 100%;
left: 0%;
right: 0%;
position: absolute;
}
<div class="logo" onclick="location.href='<%= DefaultPath %>'" style="height:15%; top:0%; background-image:url('<%= LogoPath %>'); background-size: 100% 100%; background-repeat:no-repeat">
</div>
<div style="padding:0%">123</div>
The div that contains "123" should be below the header div. How can I do this?
First of all you should not use so much inline styles. rather use it within a css class (like you did for some code in .logo)
you could use something like this to achieve your positioning:
.header {
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 100%;
background-color: grey;
background-image: url('');
background-position: center center;
background-size: 100% 100%;
}
.numbers {
margin-top: 50px;
height: 100px;
background-color: blue;
width: 100%;
}
and the html is simply this:
<div class="header"></div>
<div class="numbers">123</div>
you would simply place your relative container with a margin-top with the height of your absolute container
i don't really like those absolute px solutions with margins.
if this header should always look like this ( with the triangle and the numbers etc) i would suggest to wrap those two containers into one absolute container and position them both relative like you can find here:
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.header {
display: block;
height: 50px;
width: 100%;
background-color: grey;
}
.numbers {
height: 100px;
background-color: blue;
width: 100%;
}
<div class="wrapper">
<div class="header"></div>
<div class="numbers">123</div>
</div>
The div below, in this scenario, would need the have a margin-top value equal to the height of the absolute positioned div.
<div class="logo" onclick="location.href='<%= DefaultPath %>'" style="height:100px; top:0%; background-image:url('<%= LogoPath %>'); background-size: 100% 100%; background-repeat:no-repeat">
123
Not easy to fix... if you set something absolutely, like you logo there, you break it out of the document flow. Hence, the rest of the page won't care where it is and cannot place itself next to it. It will just be under or over it.
You could detect the position of the logo with javascript and place the other one next to it if it too is aboslute.
I THINK you want to set the logo to position: fixed instead, and add margin-top to the body, so that it always starts where the logo ends. That way the logo would always be on top and follow you when you scroll, and the body wont be covered by the logo.
it's a known 'bug' that elements with fixed position loose their position if the container is translated. For example, if i've got a structure like this:
<div class="container">
<div class="fixed"></div>
</div>
and, say, the container is scrolled, when the conteiner gets transformed (say, translate(x,y), rotate(), or so..), then the fixed element behaves like it was positioned relative and it scrolls with the container. I can see it on the latest firefox, for example.
How can one fix this kind of problem? Is there any way?
This behaviour is not a bug. It's actually the specs recommended behaviour.
(See this post by Eric Meyer, or this question here on SO which accepted solution only provides a link to the same meyer's post)
For those who don't know this issue, and because you didn't provide a snippet into your question, here's one.
document.addEventListener('click', function() {
document.getElementById('container').classList.toggle('transformed')
}, false);
#bg {
border: 1px solid #AFA;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#container {
border: 1px solid #FAF;
height: 50%;
width: 75%;
position: relative;
margin: 0 auto;
overflow: auto;
}
#content {
background: rgba(125, 175, 0, .7);
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.transformed {
transform: translate(0, 5em);
}
<div id="bg">
<div id="container" class="transformed">
.<br>.<br>.<br>.<br>.<br>.<br>.
this is a scrollable paragraph
<br>.<br>the "fixed" content does scroll with the paragraph
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
you can click to toggle the transformation On/Off
<br>.<br>.<br>.<br>.<br>.
<span id="content">relatively fixed content</span>
</div>
</div>
However, I did find something that may help others facing the same issue.
It's not really a solution, since the "fixed" element will be only inside the container, (except for IE browsers where it will really be fixed to the document). But in my case, it's actually what I wanted and maybe it'll be fine for others too.
If you add a wrapper, set its height:100%; width:100%; and overflow:auto, then your "fixed" content won't scroll with the container.
Actually it's not you container which scrolls anymore, but the wrapper. So you might want to set the container's overflow:visible or hidden to avoid unwanted scrolling of the not so well "fixed" element.
Also, note that you need your wrapper be a block or inline-block element.
#bg {
border: 1px solid #AFA;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#container {
border: 1px solid #FAF;
height: 50%;
width: 75%;
position: relative;
margin: 0 auto;
overflow: visible;
}
#wrapper {
height: 100%;
width: 100%;
overflow: auto;
}
#content {
background: rgba(125, 175, 0, .7);
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.transformed {
transform: translate(0, 50%);
}
<div id="bg">
<div id="container" class="transformed">
<div id="wrapper">
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<span id="content">relatively fixed content</span>
</div>
</div>
</div>
I am not familiar with this bug, but when you use positioned: fixed; the element is positioned relative to the browser window, so it doesn't really make any sense to put it inside a container.
This markup would be my recommendation:
<div class="fixed"></div>
<div class="container"></div>
Once you use position: fixed; on any element it is positioned relative to the view-port. Directly from page in MDN about position property.
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.
So what you are experiencing is a what it is actually supposed to work like and not a 'bug'.
Now if what you want is something that is positioned with relation to the .container div and translate with it than you will have to use absolute positioning here. Take a look at this fiddle. The important CSS is-
.container {
width: 200px;
height: 100px;
position: relative;
}
.absolute {
position: absolute;
width: 20px;
height: 10px;
top: 50px;
left: 50px;
}
Notice that with positioning the inner div as absolute I have also positioned the outer div as relative as the inner div takes its position in reference to the closest parent div positioned as anything different from static.