I have a div directly under the body. My HTML looks like this:
<body>
<div class="parent"></div>
</body>
And the css I use is this:
.parent {
border:1px solid black;
bottom:10px;
position:relative;
top:100px;
width:500px;
}
This div doesnt stretch to the entire viewport/available body height. However, if I change the position to absolute, It does stretch.
Is there a way to get a relative positioned element to stretch to its container element height. I tried height 100% as well and it works but it gives a vertical scrollbar to me as the element is positioned at 100px from TOP.
The terms top, bottom, left and right are generally used for absolute positioning. If you want a div container to be as big as it's parent's container, then you have to specify through the terms height and width, and use a percentage or integer with a measurement scale attached such as 'px'. If you are worried about a scrollbar, just use the rule overflow:hidden;
Related
https://jsfiddle.net/z3fhtbq9/
I expect the above fiddle will show the background color red from top to bottom of the body.But it doesn't.Why?
<div style="background-color:red;position:relative;top:0px;bottom:0px;">
Add a div size (height width)..it will work
<div style="height: 100vh;background-color:red;position:relative;top:0px;bottom:0px;">
</div>
The div had height 0 and width 0(width was same always) thats why no change was observed. If you had added something inside the div like some text or simply gave a height-width it could have worked.
Here 100vh means the element will always be 100% height of the viewport a device has.
An element with absolute positioning is not affected by other elements
and it doesn't affect other elements. So basically it is not affected
by any other element. So the 100% vh doesn't work on it. It will work
if you put in a relatively positioned div of full size.The absolutely
positioned element is positioned relative to nearest positioned
ancestor(non static).
I don't see relation to positioning, but to fill the body with this div, you need to set the width and height of the elements. You can set on css:
html, body {width:100%; height:100%; margin:0;}
and on your div style you add width and height 100%, like this:
<div style="width:100%; height:100%; background-color:red;position:relative;top:0px;bottom:0px;"></div>
Or you can just put the red background style on the body div.
I have a container div which contains an element with fixed proportions (an image for simplicity, but can be a video too). From now, I'll identify the container div with container and the element inside it with element.
Requirements
Here's what I'm trying to get (possibly using CSS only, without JS)
container must be 100% of window width and 50% of window height (see height exception in requirement n.5)
element must fill 100% of container width and keep its proportions (don't have to be deformed from window resizes)
element must be centered both vertically and horizontally inside container
when element height is higher than container height, excess parts of element above and below container must be hidden
when element height is lower than container height, container height must fit element height
The goal is to essentially create something equivalent to what background-size:cover does with images, but applied to a generic element with fixed proportions.
My (partial) solution
Here's my actual code. I've managed to achieve requirements n.1,2,4 (see fiddle) but I'm still struggling to find a solution for 3 and 5. In the posted fiddle I've commented overflow:hidden property and set a border to container to better show my goal.
.container {
margin-top:100px;
border:2px solid red;
height:50vh;
display:block;
/*overflow:hidden;*/
position:relative;
}
.container>* {
position:absolute;
top:-25vh;
display:block;
width:100%;
z-index:-1;
}
Any ideas?
:)
when i dont set top/left properties for an element fixed what acccured??
please see this sample code:
#fixed-menu{
background-color:#ba4444;
border-top: 5px solid #0892cd;
height: 60px;
position: fixed;
width: 100%;
z-index:9999;
box-shadow:rgb(128, 128, 128) 0px 5px 15px 0px;
}
#wrapper{
height:900px;
width:960px;
margin:0 auto;
background-color:yellow;
margin-top:100px;
}
<body>
<div id="fixed-menu"></div>
<div id="wrapper"></div>
<body>
with above code,fixed-menu also have 100px margin-top!!!!why?????
...................
how calculated top property???
Once an element has been fixed with position: fixed, the three properties left, width and right together determine the horizontal position and size, relative to the window. (CSS uses the more general word viewport; a window is an example of a viewport.)
You need at most two of the three properties, i.e., left & width, right & width, or left & right. Setting just one of the three, or none at all is also possible. In that case, CSS will use the element's natural (“intrinsic”) size and/or position, as needed, for any properties that are left at their default value ('auto').
The same holds for the trio top, height and bottom. You need to set at most two of them: top if you want to control the distance from the top of the window, bottom to control the distance from the bottom, and height if you want to specify a fixed height.
I hope that answers your question. For further reading you can refer to this link
Tip : Fixed position is free flow guy in the document window. Based on the element present before the fixed element aligns itself next to it.
In your example there's no elem before fixed div but the following wrapper div you are setting the margin top to 100px. which affects the viewport. So you can imagine the viewport for fixed element starts below the 100px mark set by the wrapper div.
you can see removing the margin in wrapper div or set the wrapper position to fixed with margin top 100px. you will get the idea.
.. expecting the picture to get "cropped" at the top and bottom. I only want it to fit the width 100%, and wish to become bigger than the height, but not leave the certain container.
How is that done?
Your question is a bit vauge if you meant you wanted an img to stretch to the full width off a container but the height too get cut off then you want something like this.
.container{
width:300px;
height:300px;
overflow:hidden;
display:block;}
.container img{
width:100%;
vertical-align:middle;
}
Just set the container's css overflow property to hidden, give it a fixed size, put your image inside with a fixed width, and done :)
Well, almost done. To get it cropped at the top and bottom, you need to get the image vertically centered in the box. One hack to achieve this is to have tiny text nodes on either side of the image, having a line-height the same as the container div height. Giving the image vertical-align:middle should center it vertically within your div.
I have a div element whose height I set with em, and whose width I set as a percentage. There is an image contained within. It has a width as a percentage (83%). However, if I am at a resolution where that div element is starting to get a little narrow, the image narrows up as well, but rather than taking up the entire div (as it should), the image just becomes small and appears just at the top of the div. To compensate for this, I want to vertically align my image within the div element. How can I do this?
vertical-align does not work in DIV elements. the only way to do this is to set this property to your div in css :
.divClass
{
display:table-cell;
vertical-align:middle;
}
after it, your DIV element will act like TD elemnt of Table.
to align your image in div with specifying percentage for image vertical position look at link bellow (percentage value) :
http://reference.sitepoint.com/css/vertical-align
Give the div position:absolute and the image inside it position:relative with top:50% and margin top equals to negative half the image height. This will center your image vertically.
div{
border:1px solid red;
width:400px;
height:400px;
position:relative;
}
img{
position:absolute;
top:50%;
margin-top:-64px; /*negative half image height */
}
Check working example at http://jsfiddle.net/qtL4n/